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

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

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

Ответ

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

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

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