Как я могу использовать getTotalLength и getPointAtLength по уменьшенному пути?

Question

getTotalLength и getPointAtLength, похоже, игнорируют преобразования.На этом:

<path id="path"
      transform="scale(1 1)"
      d="M 137.077 222.345 C 124.162 222.345 120.887 258.264 120.887 265.519 C 120.887 289.603 115.13 315.169 129.522 325.962 C 148.995 340.568 167.219 344.292 180.251 347.549 C 210.399 355.086 228.43 359.24 246.091 360.502 C 281.021 362.997 302.891 362.903 322.724 361.581 C 357.33 359.274 374.138 351.966 391.803 347.549 C 409.773 343.057 427.54 326.205 432.818 313.01 C 441.201 292.051 458.843 282.426 464.119 266.598"
      stroke="black" fill="none" />

этот код

var p = document.getElementById('path')
var l = p.getTotalLength()
console.log(l)

печатает 493.8976745605469

и на этом:

<path id="path"
      transform="scale(2 2)"
      d="M 137.077 222.345 C 124.162 222.345 120.887 258.264 120.887 265.519 C 120.887 289.603 115.13 315.169 129.522 325.962 C 148.995 340.568 167.219 344.292 180.251 347.549 C 210.399 355.086 228.43 359.24 246.091 360.502 C 281.021 362.997 302.891 362.903 322.724 361.581 C 357.33 359.274 374.138 351.966 391.803 347.549 C 409.773 343.057 427.54 326.205 432.818 313.01 C 441.201 292.051 458.843 282.426 464.119 266.598"
      stroke="black" fill="none" />

точно такое же значение.

Как получить getTotalLength и getPointAtLength для расчета в соответствии с преобразованиями?

Answer 1

Для .getTotalLength() математика достаточно проста.Если у вас одинаковая шкала, длину можно просто умножить на это число;или, в более общем случае, для

transform = scale(sx, sy) =>
length' = length * √(sx² + sy²)

Но тогда, если вы попытаетесь найти точку вдоль пути, вы должны использовать нетрансформированные значения.Если результат .getTotalLength() равен 400, а путь равномерно масштабирован с 2, общая длина может быть 800, но чтобы найти точку 90% вдоль пути, вам все равно нужно вычислить .getPointAtLength(360).

Чтобы преобразовать точку, которую вы нашли с помощью .getPointAtLength(), вы можете использовать SVGMatrix, например:

var p = document.getElementById('path');
var svg = p.ownerSVGElement; // only <svg> elements have a method to init SVGMatrix

var matrix = svg.createSVGMatrix().scaleNonUniform(sx, sy); // or .scale(s) for uniform scale

var point = p.getPointAtLength(length).matrixTransform(matrix);