gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:51:05 26 4
gpt4 key购买 nike

我想我不太明白这里的某些东西。stroke-dasharray 中的百分比单位与什么有关?我在考虑相对于 SVG View 框的问题,但我可能错了。

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

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

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

我想我不太明白这里的某些东西。stroke-dasharray 中的发音单位与什么有关?我在考虑相对于 SVG View 框的问题,但我可能错了。

我的问题:我有一个 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>

最佳答案

由于一条线可以向任何方向延伸,因此将“视口(viewport)的百分比”与其宽度或高度相关联是没有意义的。相反,100% 是 set to宽度和高度的均方根:

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

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

关于SVG - 带有百分比单位的 stroke-dasharray 不能按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63375409/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com