Укорочение SVG-пути через JS — как осуществить?

Question

[Денис Букреев]

Есть некоторый путь в виде дуги

<path d="M13.7243948,73.2793765 C86.8424111,24.4264588 173.865999,1.73468666e-15 274.795158,0 C375.724318,0 462.747906,24.4264588 535.865922,73.2793765" id="active-path" stroke="url(#linearGradient-1)" stroke-width="2" stroke-linecap="square"></path>

И этот путь мне надо показывать в зависимости от получаемого с сервера числа - в JS я его перевожу в проценты и от этих процентов мне надо отталкиваться.

Как мне это сделать, если мне, например, надо показывать 47% пути?

UPD (для понимания моей задачи):
Надо, чтобы этот самолетик двигался по дуге до определенного момента, вместе с тем и дуга чтоб закрашивалась позади самолетика

Answer 1

[Stalker_RED]

#active-path {
  stroke-dasharray: 58% 200%;
}

Первое число - длина линии, второе - промежуток между линиями.
Коэффициент 1.24 подобран эмпирически, и зависит от кривизны дуги.

https://jsfiddle.net/Stalk/mx9L752a/

Comments

[Денис Букреев]

не очень подходит, т.к. объект, который двигается по этой дуге, игнорирует ее заливку

[Stalker_RED]

Денис Букреев: Вам еще и функцию движения самолетика написать?
И в приведенном примере нет заливки вообще.

[Денис Букреев]

Stalker_RED: у меня уже все работает, кроме ограничения этой дуги
в приведенном примере используется как раз изменение заливки (или границы - как хотите), на сам путь никак не влияет

[Stalker_RED]

Денис Букреев: У вас дуга из двух кривых Безье. Это нужно для двух точек координаты считать и двигать их. Если меньше половины - то одну кривую вообще убирать. Много возни непонятно зачем (у вас же еще куча дополнительных условий припрятана, да?).

[Stalker_RED]

Денис Букреев: Если заменить кривые Безье на фрагмент дуги (arc), то считать придется поменьше. Но я все равно не вижу смысл этого действия.