路徑長度
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 |