Question:
The question arose, is it possible to create a figure in a vector from two open paths? I will give an example
<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>There are two half-rings here. But I can't remove the stroke from the top of this shape. Can someone advise how to implement this. In the future, these two half-rings are planned to be animated. There should be an animation of gradual painting from the top to the bottom.
Answer:
You can go the other way. Draw one patch instead of four. With one patch, it will be easier to animate at the same time. But you need to know exactly the length of this patch, in order to use it later in the animation using the stroke-dasharray path d="m322....58z"
<body>
<input id="button1" type="button" value="TotalLength"
onclick="TotalLength()"/>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="400" viewBox="0 0 600 400"
style="border:1px dotted red;">
<path id="check" fill= "none" stroke ="green" stroke-width ="10"
d="m322 255a188 58 0 0 1-188-58 188 58 0 0 1 188-58 188 58 0 0 1 188 58 188 58 0 0 1-188 58z" />
</svg>
<script>
function TotalLength(){
var path = document.querySelector('#check');
var len = path.getTotalLength();
console.log('Длина равна - ' +len);
};
</script>
</body>After clicking on the TotalLenght button from the modal window, we take the length of our patch and substitute it in stroke-dasharray .
<svg version="1.1" id="ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" >
<path id="shape" fill="none" stroke-width="15" stroke="gold" d="m322 255a188 58 0 0 1-188-58 188 58 0 0 1 188-58 188 58 0 0 1 188 58 188 58 0 0 1-188 58z" />
<animate
xlink:href="#shape"
attributeName="stroke-dasharray"
from="0 413.5 0 413.5" to="0 0 827 0"
begin="0s"
dur="3.3s"
repeatCount="3"
/>
</svg>Note that instead of 2 stroke-dasharray , four are used. In order for the animation to go from the middle of the path in different directions, you need to divide the full length into halves 0 = 413.5 To end the animation, the full length of the path 827 is substituted. decrease the space between strokes from maximum to zero.