如何解决SVG-具有百分比单位的笔划-dasharray无法正常工作
我想我不太了解这里的内容。 笔划破折号数组中的百分比单位对值有影响吗?我当时正在考虑相对于SVG视图框,但我可能错了。
我的问题: 我有一个SVG,宽度为320px,高度为160px。 在此SVG中,我从x1 =“ 0%”到x2 =“ 100%”画了一条线,因此它的宽度与SVG一样为320px。
然后我给出以下代码:stroke-dasharray:100%100%;
对于我来说,令人惊讶的是,该线没有以SVG的整个宽度绘制,而只有80%左右。
我想我不太了解这里的内容。 笔划数组中的发音单位是真实的吗?我当时在想相对于SVG视图框,但我可能错了。
我的问题: 我有一个SVG,宽度为320px,高度为160px。 在此SVG中,我从x1 =“ 0%”到x2 =“ 100%”画了一条线,因此它的宽度与SVG一样为320px。
然后我给出以下代码:stroke-dasharray:100%100%;
对于我来说,令人惊讶的是,该线没有以SVG的整个宽度绘制,而只有80%左右。
如果有人有想法,我很高兴收到您的来信
这里是示例的链接:https://codepen.io/stefka1210/pen/xxVwBom
html,body {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 320px;
height: 160px;
background: lightgrey;
}
svg {
width: 100%;
height: 100%;
}
line {
stroke-width: 2px;
}
#one {
stroke-dasharray: 100% 100%;
stroke: red;
}
#two {
stroke-dasharray: 320px 320px;
stroke: green;
}
<html>
<body>
<div class="container">
<svg x="0px" y="0px" viewBox="0 0 320 160" xmlns="http://www.w3.org/2000/svg">
<g>
<line id="one" x1="0%" y1="40%" x2="100%" y2="40%"></line>
<line id="two" x1="0%" y1="60%" x2="100%" y2="60%"></line>
</g>
</svg>
</div>
</body>
</html>
解决方法
由于一条线可以向任何方向移动,因此将“视口百分比”链接到其宽度或高度都没有意义。而是100%是{em>宽度和高度的均方根:
对于宽度= 320和高度= 160,其长度为252.98。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。