pathlength
pathlength
该属性让作者以用户单位指定路径的总长度。然后使用该值通过使用比率pathLength/（路径长度的计算值）缩放所有距离计算来校准浏览器与作者的距离计算。
这会影响路径的实际渲染长度; 包括文本路径，动画路径和各种笔画操作。基本上，所有的计算都需要路径的长度。例如，stroke-dasharray将假设路径的开始是0，结束点是在pathLength属性中定义的值。
用法说明
| 分类 | 没有 |
|---|---|
| 值 | <数字> |
| 动画 | 是 |
| 规范性文件 | SVG 1.1（第二版）：pathLength属性 |
例子
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path pathLength="100" stroke-dasharray="90" fill="none" stroke="black" stroke-width="2" d="m 0,0 100,100 -50,-75 0,50 z"/>
<path stroke-dasharray="90" fill="none" stroke="black" stroke-width="2" d="m 100,0 100,100 -50,-75 0,50 z"/>
</svg>
| Screenshot | Live sample |
|---|---|
| | |
左边的路径将其pathLength设置为100，使得stroke-dasharray有效覆盖路径的90％，而不是像右侧路径那样仅有90个用户单元。
元素
以下元素可以使用该pathLength属性：
- <path>
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | 6.0 (6.0) | No support | (Yes) | No support |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 6.0 (6.0) | ? | ? | ? |
