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>

圆形

对于 <circle>pathLength 允许作者以用户单位指定圆形的总长度。

<number>
默认值
可动画

椭圆

对于 <ellipse>pathLength 允许作者以用户单位指定椭圆的总长度。

<number>
默认值
可动画

直线

对于 <line>pathLength 允许作者以用户单位指定直线的总长度。

<number>
默认值
可动画

路径

对于 <path>pathLength 允许作者以用户单位指定路径的总长度。

<number>
默认值
可动画

多边形

对于 <polygon>pathLength 允许作者以用户单位指定图形的总长度。

<number>
默认值
可动画

折线

对于 <polyline>pathLength 允许作者以用户单位指定图形的总长度。

<number>
默认值
可动画

矩形

对于 <rect>pathLength 允许作者以用户单位指定矩形的总长度。

<number>
默认值
可动画

规范

规范
可缩放矢量图形 (SVG) 2
# PathLengthAttribute