根据 https：// https：// https：//developer.mozilla.orgg/en-en--en--en--en--en--en--en--en--en--en--en--en--en--en--en--en--en-g een-en-en-gen-en-n-en--en-n-en-peverical-en-en-en-gen-en-n-en-cor-n-en-en-cor-org/en-gen-n-en-circ.org noreforrer =“ us/doc/web/svg/element/circle ， pathlength 属性应该定义“圆圈的总长度”，但是，当我使用 stroke- dasharray ，它似乎不排队吗？
<svg width="100" height="100" viewBox="0 0 1 1">
<circle
cx="0.5"
cy="0.5"
stroke-width="0.5"
r="0.25"
pathLength="360"
stroke-dasharray="180 360"
stroke-dashoffset="0"
stroke="black"
fill="none"
/>
</svg>
根据也应该是半填充的，因此是半圆形的，但是它略小于半圆形。如果我有 stroke-dasharray 将设置为 360 360 ，那么它不会完全关闭，如果我理解 Pathlength的方式属性是如何假设的要工作，应该。
我是误解 Pathlength 还是 stroke-dasharray ？
编辑：在浏览器之间似乎有所不同...？
铬：
firefox：
编辑2：
当我获得总长度时，浏览器之间的总长度有所不同！这是打算的吗？可以解决这个问题吗？
According to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle, the pathLength attribute is supposed to define the "total length for the circle's circumference", however, when I use stroke-dasharray, it doesn't seem to line up?
<svg width="100" height="100" viewBox="0 0 1 1">
<circle
cx="0.5"
cy="0.5"
stroke-width="0.5"
r="0.25"
pathLength="360"
stroke-dasharray="180 360"
stroke-dashoffset="0"
stroke="black"
fill="none"
/>
</svg>
According to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength as well, this should be half-filled, thus a semi-circle, however it's slightly less than a semi-circle. If I have stroke-dasharray set to 360 360 instead, it doesn't fully close when, if I understand how the pathLength attribute is supposed to work, it should.
Am I misunderstanding pathLength or stroke-dasharray?
Edit: it seems to work differently across browsers...?
Chromium:
Firefox:
Safari:
Edit 2:
When I get their total lengths, it's different across browsers! Is this intended? Is it possible to solve this issue?
发布评论
评论（1）
正如@enxaneta所说的那样。查看框越小，问题就越大。在此示例中，仅在Chrome中看起来还不错。
As @enxaneta commented. The smaller the viewBox, the bigger the problem is. In this example it is only the last one (
viewBox="0 0 100 100") that looks OK in Chrome.