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 |