Возник такой вопрос, возможно ли в векторе создать фигуру из двух незамкнутых путей? Приведу пример
<svg version="1.1" id="ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#FBE731;stroke:#B1A333;stroke-miterlimit:10;}
</style>
<g id="RightRing">
<path class="st0" d="M302.3,210.8c36.3,0,65.8-5.7,65.8-12.8c0-7.1-29.4-12.8-65.8-12.8c-0.4,0-0.9,0-1.3,0v25.6
C301.4,210.8,301.9,210.8,302.3,210.8z"/>
<path id="rightSide" class="st1" d="M303,226.4c0.1,0,0.2,0,0.3,0c49.3,0,89.2-11.9,89.2-26.7c0-14.8-40-26.7-89.5-26.7v12.2
c0.1,0,0.1,0,0.2,0c36.3,0,66.9,5.7,66.9,12.8c0,7.1-29.5,12.8-65.8,12.8c-0.4,0-0.7,0-1.1,0c-0.1,0-0.2,0-0.2,0"/>
</g>
<g id="LeftRing">
<path class="st0" d="M304.2,210.8c-36.3,0-65.8-5.7-65.8-12.8c0-7.1,29.4-12.8,65.8-12.8c0.4,0,0.9,0,1.3,0v25.6
C305.1,210.8,304.6,210.8,304.2,210.8z"/>
<path id="rightSide_1_" class="st1" d="M303.5,226.4c-0.1,0-0.2,0-0.3,0c-49.3,0-89.2-11.9-89.2-26.7c0-14.8,40-26.7,89.5-26.7
v12.2c-0.1,0-0.1,0-0.2,0c-36.3,0-66.9,5.7-66.9,12.8c0,7.1,29.5,12.8,65.8,12.8c0.4,0,0.7,0,1.1,0c0.1,0,0.2,0,0.2,0"/>
</g>
</svg>
Здесь два полу-кольца. Но у меня не получается убрать обводку stroke
с верхних части данной фигуры. Может кто-то посоветовать, как это реализовать. В дальнейшем эти два полукольца планируется анимировать. Должна происходить анимация постепенного закрашивания с верхней части в нижнюю.