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 |