3

我想我不太明白这里的一些东西。stroke-dasharray 中的百分比单位与什么有关？我在考虑相对于 SVG 视图框，但我可能错了。

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

然后我给出这条线： stroke-dasharray: 100% 100%;

令我惊讶的是，这条线不是用 SVG 的全宽绘制的，而是只有 80% 左右。

我想我不太明白这里的一些东西。stroke-dasharray 中的发音单位与什么有关？我在考虑相对于 SVG 视图框，但我可能错了。

我的问题：我有一个宽度为 320 像素、高度为 160 像素的 SVG。在这个 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>

4

1 回答 1

4

由于一条线可以朝任何方向行进，因此将“视口的百分比”链接到它的宽度或高度是没有意义的。相反，100%设置为宽度和高度的均方根：

\sqrt{\frac{宽度^{2}+高度^{2}}{2}}

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

于 2020-08-12T13:41:52.540 回答