路径长度
pathLength 属性允许作者以用户单位指定路径的总长度。然后，通过将所有距离计算乘以 pathLength / (路径长度的计算值) 的比率来缩放，该值用于校准浏览器与作者的距离计算。
这会影响路径的实际渲染长度；包括文本路径、动画路径和各种描边操作。基本上，所有需要路径长度的计算。例如，stroke-dasharray 将假定路径的起点为 0，终点为 pathLength 属性中定义的值。
你可以将此属性与以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<style>
path {
fill: none;
stroke: black;
stroke-width: 2;
stroke-dasharray: 10;
}
</style>
<!-- No pathLength, the real length of the path is used. In that case, 100 user units -->
<path d="M 0,10 h100" />
<!-- compute everything like if the path length was 90 user units long -->
<path d="M 0,20 h100" pathLength="90" />
<!-- compute everything like if the path length was 50 user units long -->
<path d="M 0,30 h100" pathLength="50" />
<!-- compute everything like if the path length was 30 user units long -->
<path d="M 0,40 h100" pathLength="30" />
<!-- compute everything like if the path length was 10 user units long -->
<path d="M 0,50 h100" pathLength="10" />
</svg>
circle
对于 <circle>，pathLength 允许作者以用户单位指定圆的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
ellipse
对于 <ellipse>，pathLength 允许作者以用户单位指定椭圆的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
line
对于 <line>，pathLength 允许作者以用户单位指定直线的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
路径
对于 <path>，pathLength 允许作者以用户单位指定路径的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
polygon
对于 <polygon>，pathLength 允许作者以用户单位指定图形的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
polyline
对于 <polyline>，pathLength 允许作者以用户单位指定图形的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
rect
对于 <rect>，pathLength 允许作者以用户单位指定矩形的总长度。
| 值 | <number> |
|---|---|
| 默认值 | none |
| 可动画的 | 是 |
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # PathLengthAttribute |