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

#1

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:
image

And turning it to this:
image

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

image

  <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>
 </svg>

I found this.

Clipping and masking

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

Would there be a way of clipping out everything in the middle?

#2

Hi there asasass,

personally, I would not, in this instance, use “Clip Path”. :unhappy:

https://jsfiddle.net/ws9op3cn/

<svg class="stack" aria-hidden="true"  viewbox="0 0 260 194">
 <line stroke="teal" x1="131" y1="40" x2="131" y2="73"></line>
 <line stroke="teal" x1="131" y1="118" x2="131" y2="149"></line>
 <line stroke="dodgerblue" x1="91" y1="133" x2="115.7" y2="109.5"></line>
 <line stroke="dodgerblue" x1="145" y1="81.7" x2="170" y2="58"></line>
 <line stroke="purple" x1="77" y1="95" x2="110" y2="95"></line>
 <line stroke="purple" x1="150" y1="95" x2="185" y2="95"></line>
 <line stroke="green" x1="169" y1="135" x2="144.3" y2="109.3"></line>
 <line stroke="green" x1="115" y1="78.9" 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>
</svg>

coothead

#3

What would the code look like if I was using clip-path?

How would it be written?
https://jsfiddle.net/5r1dg4hx/3/

http://www.cssplant.com/clip-path-generator
https://bennettfeely.com/clippy/

  <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>
 </svg>
#4

Hi there asasass,

to the best of my knowledge clipping creates two parts the
clipped and the un-clipped. one visible the other invisible. :winky:

Your requirement for each line, though, is threefold. :wonky:

coothead

#5

Something like this?
https://jsfiddle.net/vc2wgk0x/2/

svg {
  border: 1px solid;
}

circle {
  fill: none;
  stroke: black;
}

<div class="playButton wrapd">
  <div class="img"></div>

  <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>

  <div class="lines"></div>
</div>

From https://stackoverflow.com/questions/56412059/using-clip-path-to-remove-37px-from-4-svg-lines-in-the-circle.

1 Like
#6

Hi there asasass,

thanks for that excellent solution. :winky:

I was looking at the problem from the wrong perspective. ::unhappy:

I learn something new, almost every single day. :biggrin:

coothead

1 Like
#7

Before 8 line strokes were needed.
https://jsfiddle.net/ws9op3cn/

 <line stroke="teal" x1="131" y1="40" x2="131" y2="73"></line>
 <line stroke="teal" x1="131" y1="118" x2="131" y2="149"></line>
 <line stroke="dodgerblue" x1="91" y1="133" x2="115.7" y2="109.5"></line>
 <line stroke="dodgerblue" x1="145" y1="81.7" x2="170" y2="58"></line>
 <line stroke="purple" x1="77" y1="95" x2="110" y2="95"></line>
 <line stroke="purple" x1="150" y1="95" x2="185" y2="95"></line>
 <line stroke="green" x1="169" y1="135" x2="144.3" y2="109.3"></line>
 <line stroke="green" x1="115" y1="78.9" x2="93" y2="56"></line>

Now only 4.
https://jsfiddle.net/vc2wgk0x/2/

      <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>
1 Like
#8

Plus…

    <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>

But, of course, it’s not the number of lines that count;
your clip method is really very simple to execute
compared to my convoluted hit and miss one. :biggrin:

coothead

2 Likes
#9

How would I do this one?

Am I doing this the right way, did I forget to do something?

Am I missing a step I was supposed to do?

This one would need to be clipped 4 times.

Template from the other one that was completed:
https://jsfiddle.net/vc2wgk0x/2/

New one is below here:

Tester:
https://jsfiddle.net/gpLv3n8r/3/

I got up to here:
https://jsfiddle.net/9mbhc0o3/
image

<div class="playButton wrapf">
  <div class="lines"></div>
  <svg aria-hidden="true" class="stack" width="260" height="245" viewbox="0 0 260 245">

    <defs>
      <clipPath id="clip"a>
        <path d="" />
      </clipPath>
    </defs>

    <defs>
      <clipPath id="clip"b>
        <path d="" />
      </clipPath>
    </defs>

    <defs>
      <clipPath id="clip"c>
        <path d="" />
      </clipPath>
    </defs>

    <defs>
      <clipPath id="clip"d>
        <path d="" />
      </clipPath>
    </defs>

    <g clip-path="url(#clipa)">
      <line stroke="yellow" x1="83" y1="91" x2="188" y2="151"></line>
      <line stroke="green" x1="135" y1="61" x2="135" y2="182"></line>
      <line stroke="cyan" x1="82" y1="152" x2="187" y2="91"></line>
    </g>

    <g clip-path="url(#clipb)">
      <line stroke="orange" x1="4" y1="122" x2="108" y2="122"></line>
    </g>
    
  <line stroke="red" x1="37" y1="122" x2="30" y2="122"></line>

    <g clip-path="url(#clipc)">
      <line stroke="black" x1="148" y1="98" x2="200" y2="9"></line>
    </g>

    <line stroke="blue" x1="183" y1="38" x2="188" y2="30"></line>

    <g clip-path="url(#clipd)">
      <line stroke="purple" x1="148" y1="145" x2="200" y2="234" stroke-width="6"></line>
    </g>
    
    <line stroke="violet" x1="183" y1="205" x2="188" y2="212" stroke-width="6"></line>

    <circle stroke="red" fill="transparent" cx="135" cy="122" r="24.5"> </circle>

  </svg>
</div>

I figured these out

These Lines and circle:
https://jsfiddle.net/j728mcy3/

<svg width="260" height="245" viewBox="0 0 260 245"> 
<line stroke="red" x1="37" y1="122" x2="30" y2="122"></line>
<line stroke="blue" x1="183" y1="38" x2="188" y2="30"></line>
<line stroke="violet" x1="183" y1="205" x2="188" y2="212" stroke-width="6"></line>
<circle stroke="red" fill="transparent" cx="135" cy="122" r="24.5"> </circle>
</svg>

Equals these as paths:
https://jsfiddle.net/j728mcy3/4/

<svg width="260" height="245" viewBox="0 0 260 245"> 
<path d="M37,122,30,122" stroke-width="6" stroke="red"/> 
<path d="M183,38,188,30" stroke-width="6" stroke="blue"/>
<path d="M183,205,188,212" stroke-width="6" stroke="violet"/>
<path d="M110.5,122a24.5,24.5 0 1,0 49,0a24.5,24.5 0 1,0 -49,0" fill="transparent" stroke-width="6" stroke="red"/>
</svg>

image

I just did this now:

How would I clip those 4 parts out, I still don’t get it.
https://jsfiddle.net/53xhvmpn/2/

<svg width="260" height="245" viewBox="0 0 260 245"> 
<path d="M4,122,108,122" stroke-width="6" stroke="orange"/> 
<path d="M37,122,30,122" stroke-width="6" stroke="red"/> 
<path d="M148,98,200,9" stroke-width="6" stroke="black"/>
<path d="M183,38,188,30" stroke-width="6" stroke="blue"/>
<path d="M148,145,200,234" stroke-width="6" stroke="purple"/>
<path d="M183,205,188,212" stroke-width="6" stroke="violet"/>
<path d="M110.5,122a24.5,24.5 0 1,0 49,0a24.5,24.5 0 1,0 -49,0" fill="transparent" stroke-width="6" stroke="red"/>
</svg>

image

Am I supposed to somehow combine these two paths.

<path d="M4,122,108,122" stroke-width="6" stroke="orange"/> 
<path d="M37,122,30,122" stroke-width="6" stroke="red"/> 

And put them in the empty one?


    <defs>
      <clipPath id="clipb">
        <path d="" />
      </clipPath>
    </defs>


    <g clip-path="url(#clipb)">
      <line stroke="orange" x1="4" y1="122" x2="108" y2="122"></line>
    </g>
#10

What am I forgetting to do, or not doing right for this to work?

#11

A different sized SVG requires a modified clip path. :winky:

https://jsfiddle.net/9ajkwLgp/1/

coothead

#13

Try applying the width and height to the parent container instead of making the SVG rigid

#14

What do you mean, there’s a difference in appearance when you do that?

#15

Can this circle be improved any more?
https://jsfiddle.net/bfyx8r3q/1/

<circle stroke="red" fill="transparent" cx="134.80" cy="121.50" r="24.40"stroke-width="6"> </circle>

#16

Enclose the SVG inside the following div and remove width and height from SVG:

<div style=“width:260px; height:245px;">
<svg viewbox="0 0 260 245">
 ...
</svg>
</div>
1 Like
#17

I managed to edit the clip path on my own.
Each of the numbers when changed, moved something, so I was able to figure it out.

https://jsfiddle.net/d0sq21gp/2/

    <defs> 
<clipPath id="clip"> 
    <path d="M0,0 0,245 260,245 260,0 0,0 M162, 120A20, 20 0 0 1 108 122A20, 20 0 0 1 161.0, 120"  /> 
 </clipPath>