Как сделать в SVG незамкнутый путь с двух сторон?

#javascript #svg #анимация #css_animation

Возник такой вопрос, возможно ли в векторе создать фигуру из двух незамкнутых путей?
Приведу пример 



	




Здесь два полу-кольца. Но у меня не получается убрать обводку stroke с верхних части
данной фигуры. Может кто-то посоветовать, как это реализовать. В дальнейшем эти два
полукольца планируется анимировать. Должна происходить анимация постепенного закрашивания
с верхней части в нижнюю.
    

Ответы

Ответ 1

Можно пойти по другому пути. Нарисовать один патч вместо четырех. С одним патчем
и анимировать при этом легче будет. Но надо точно узнать длину этого патча, чтобы потом
использовать её в анимации посредством свойства stroke-dasharray Для определения длины
пути нужно подставить своё значение  строки path, начинающейся с d="m322....58z" 














После нажатия на кнопку TotalLenght из модального окна берем длину нашего патча и
подставляем в stroke-dasharray. 








Обратите внимание, что вместо 2-х атрибутов stroke-dasharray использовано четыре.
Для того, чтобы анимация шла из середины пути в разные стороны нужно разделить полную
длину на пополам 827/2 = 413.5  Для окончания анимации подставляется полная длина пути
827 То есть эффект анимации достигается за счет увеличения длины штриха с 0 до полной
длины и соответственно идет одновременное уменьшение пробела между штрихами от максимума
до нуля.


Ответ 2

Да, можно. Используй m для прохождения этой линии, чтобы она не рисовалась.
v не подходит, т. к. рисует линию.