首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

pathlength

该属性让作者以用户单位指定路径的总长度。然后使用该值通过使用比率pathLength/(路径长度的计算值)缩放所有距离计算来校准浏览器与作者的距离计算。

这会影响路径的实际渲染长度; 包括文本路径,动画路径和各种笔画操作。基本上,所有的计算都需要路径的长度。例如,stroke-dasharray将假设路径的开始是0,结束点是在pathLength属性中定义的值。

用法说明

分类

没有

<数字>

动画

规范性文件

SVG 1.1(第二版):pathLength属性

例子

代码语言:javascript
复制
<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)

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com