Search code examples
svgclippingclip-path

Using clip-path to remove 37px from 4 svg lines in the circle

What I'm trying to do is remove the svg lines in the middle of the circle.

How would this be done using clip-path?

Taking this: https://i.sstatic.net/sSSFj.png

And turning it to this: https://i.sstatic.net/R3KnS.png

Code: https://jsfiddle.net/5r1dg4hx/3/

https://i.sstatic.net/f2T8b.png

  <svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
    <line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
    <line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
    <line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
    <line stroke="green" x1="169" y1="135" x2="93" y2="56"></line> 
    <circle class="outer" cx="131" cy="95" r="55"></circle>
    <circle cx="130" cy="95.40" r="20.8"></circle>

Solution

  • You will need to draw a path with a hole for the clipping path:

    <path d="M0,0 0,194 260,194 260,0 0,0 
         M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40"  />

    The first part of the path (M0,0 0,194 260,194 260,0 0,0) is drawing a rectangle as big as the svg canvas. The second part (M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40) is drawing a circle as big as the inner circle and in the same position.

    Next you wrap the lines in a group and you clip the group.

    svg{border:1px solid;}
circle{fill:none;stroke:black}
    <svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
  <defs> 
<clipPath id="clip"> 
    <path d="M0,0 0,194 
    260,194 260,0 0,0 M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40"  /> 
 </clipPath> 
  </defs>
  <g clip-path="url(#clip)">
    <line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
    <line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
    <line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
    <line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
  </g>
    <circle class="outer" cx="131" cy="95" r="55"></circle>
    <circle cx="130" cy="95.40" r="20.8"></circle>

   </svg>