SVG

Question

我想我不太明白这里有什么地方。 stroke-dasharray 中的百分比单位与什么有关？我在考虑相对于 SVG viewbox，但我可能错了。

我的问题：我有一个 SVG，宽度为 320px，高度为 160px。在这个 SVG 中，我画了一条从 x1 = "0%" 到 x2 = "100%" 的线，所以它和 SVG 一样宽度为 320px。

然后我给出一行：stroke-dasharray: 100% 100%;

令我惊讶的是，这条线不是用 SVG 的整个宽度绘制的，而是只有大约 80%。

我想我不太明白这里有什么地方。 stroke-dasharray 中的发音单位与什么有关？我在考虑相对于 SVG viewbox，但我可能错了。

我的问题：我有一个 SVG，宽度为 320px，高度为 160px。在这个 SVG 中，我画了一条从 x1 = "0%" 到 x2 = "100%" 的线，所以它和 SVG 一样宽度为 320px。

然后我给出一行：stroke-dasharray: 100% 100%;

令我惊讶的是，这条线不是用 SVG 的整个宽度绘制的，而是只有大约 80%。

如果有人有想法，我很乐意听取你的意见

这里以link为例：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>

Answer 1

由于一条线可以向任何方向延伸，因此 link“视口的百分比”与其宽度或高度的比例没有任何意义。相反，100% 是 set to 宽度和高度的 均方根 ：

$\sqrt{\frac{width^{2}+height^{2}}{2}}$

对于宽度 = 320 和高度 = 160，长度为 252.98。

SVG - 带有百分比单位的 stroke-dasharray 不能按预期工作

SVG - stroke-dasharray with percentage units doesn't work as expected

stroke-dasharray