pathLength
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>
圓形
橢圓
直線
路徑
多邊形
折線
對於 <polyline>,pathLength 允許作者以使用者單位指定圖形的總長度。
| 值 | <number> |
|---|---|
| 預設值 | 無 |
| 可動畫 | 是 |
矩形
規範
| 規範 |
|---|
| 可縮放向量圖形 (SVG) 2 # PathLengthAttribute |