如何解决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 举报，一经查实，本站将立刻删除。