There was such a question, is it possible in the vector to create a figure 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>

Here are two half-rings. But I can't remove the stroke stroke from the upper parts of this figure. Can someone advise how to implement it. In the future, these two half-rings will be animated. A gradual shading animation should occur from the top to the bottom.

  • Remove the vertical bar at the top or, if you hold an imaginary horizontal axis in the center of the ellipse, then remove the entire stroke, which is higher than it? - Alexandr_TT
  • There are actually two lines, just one on top of the other. But in general, yes. Need to remove them. It should look like a closed ring - BlackStar1991

2 answers 2

You can go the other way. Draw one patch instead of four. With one patch, it will be easier to animate. But you need to know exactly the length of this patch, then use it in the animation using the property stroke-dasharray To determine the length of the path, you need to substitute your d="m322....58z" path line value starting with 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(); alert(len); }; </script> </body>

After clicking on the TotalLenght button from the modal window, take the length of our patch and substitute it into the 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>

Please note that instead of the 2 attributes of the 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 in half 827/2 = 413.5 To end the animation, the full length of the path 827 is substituted. reducing the space between the bars from the maximum to zero.

    Yes you can. Use m to go through this line so that it is not drawn.
    v does not fit, because it draws a line.

     <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,0m0,25.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.7m0,12.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,0m0,25.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 m0,12.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>