Блог

Я ищу способы вычисления path.getTotalLength() в Node.js и кажется, что полизаполнение недоступно. До сих пор мне удалось вычислить все другие команды пути, кроме A .

Например, зная последние X и Y из M сегмента, а также имея все A значения сегмента, как определить длину этого пути?

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M8 15 A7 7 0 1 0 8 1">
</svg>
  

Спасибо

У MDN есть отличная документация в отношении различных команд path.

MDN > Руководство по SVG > Пути

Вот как вы разлагаете предоставленные команды path:

M 8 15 = Переместить в (абсолютное значение)

 x = 8
y = 15
  

A 7 7 0 1 0 8 1 = Дуга (абсолютная)

 rx = 7
ry = 7
x-axis-rotation = 0
large-arc-flag = 1
sweep-flag = 0
x = 8
y = 1
  

Я следовал этому сообщению Mathematics Exchange, чтобы вычислить длину дуги, учитывая команды пути состояний. Поскольку радиусы x и y вашей дуги равны, это немного проще.

Примечание: я не уверен, что вам нужно будет делать, если они разные.

 const x1 = 8, y1 = 15;
const x2 = 8, y2 =  1;
const r  = 7; // Since rx === ry, this is a bit easier

const d = Math.sqrt(Math.pow(x1 - x2, 2)   Math.pow(y1 - y2, 2));
const theta = Math.acos(1 - (Math.pow(d, 2) / (2 * Math.pow(r, 2))));

const arcLength = theta * r;

console.log(arcLength); // Arc Length = 21.9911  

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="
      M 8 15
      A 7 7 0 1 0 8 1
    " fill="none" stroke="black" stroke-width="2" />

  <!-- Move to and begin arc at (8, 15) -->
  <circle cx="8" cy="15" r="1" stroke="none" fill="red" />
  
  <!-- End arc at (8, 1) -->
  <circle cx="8" cy="1" r="1" stroke="none" fill="cyan" />
  
  <!-- Radius of (7, 7) -->
  <circle cx="15" cy="7.5" r="1" stroke="none" fill="lime" />
  
  <!-- Center -->
  <circle cx="8" cy="7.5" r="1" stroke="none" fill="gold" />
</svg>