SVG参考手册
属性 | Attributes
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) |
? |
? |
? |