pathLength

Атрибут pathLength позволяет авторам задавать общую длину пути в пользовательских единицах. Затем это значение используется для согласования вычислений расстояний браузером с вычислениями автора: все вычисления расстояний масштабируются с помощью коэффициента pathLength / (вычисленное значение длины пути).

Это может влиять на фактическую отображаемую длину путей, включая текстовые пути, пути анимации и различные операции обводки. По сути, это касается всех вычислений, для которых требуется длина пути. Например, stroke-dasharray будет считать, что начало пути соответствует значению 0, а конечная точка — значению, заданному в атрибуте pathLength.

Этот атрибут можно использовать со следующими элементами SVG:

• <circle>
• <ellipse>
• <line>
• <path>
• <polygon>
• <polyline>
• <rect>

Пример

<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

Для <circle> атрибут pathLength позволяет авторам задавать общую длину окружности в пользовательских единицах.

ellipse

Для <ellipse> атрибут pathLength позволяет авторам задавать общую длину эллипса в пользовательских единицах.

line

Для <line> атрибут pathLength позволяет авторам задавать общую длину линии в пользовательских единицах.

path

Для <path> атрибут pathLength позволяет авторам задавать общую длину пути в пользовательских единицах.

polygon

Для <polygon> атрибут pathLength позволяет авторам задавать общую длину фигуры в пользовательских единицах.

polyline

Для <polyline> атрибут pathLength позволяет авторам задавать общую длину фигуры в пользовательских единицах.

rect

Для <rect> атрибут pathLength позволяет авторам задавать общую длину прямоугольника в пользовательских единицах.

Спецификации