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.imgur.com/DGX3Yji.png
And turning it to this:
https://i.imgur.com/gg4XFUq.png
Code:
https://jsfiddle.net/5r1dg4hx/3/
https://i.imgur.com/SGzGzaE.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>
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>
I have two very similar SVG files. They differ only by a small amount of vertical offset of where I'm drawing arcs. Yet when I draw them offset at 31.9mm, they should up just fine.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="152.4mm" height="152.4mm" viewBox="0 0 152.4 152.4">
<path d="M 1,1 l 151.4,0.0 l 0.0,151.4 l -151.4,0.0 Z" stroke="black" fill="white" />
<path d="M 30.162498,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 55.5625,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 80.962494,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 106.362495,31.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
</svg>
But when I change the offset by 1, to 32.9, they completely disappear. At least when viewed in Chrome.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="152.4mm" height="152.4mm" viewBox="0 0 152.4 152.4">
<path d="M 1,1 l 151.4,0.0 l 0.0,151.4 l -151.4,0.0 Z" stroke="black" fill="white" />
<path d="M 30.162498,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 55.5625,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 80.962494,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
<path d="M 106.362495,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0e-6 Z" stroke="black" fill="white" />
</svg>
I must say I'm pretty baffled by this behavior. What am I doing wrong?
You are relying on the difference between 31.9 and 31.9 + 1.0e-6 to draw your arc as having identical values for y and the arc start y co-ordinate would cause no arc to be drawn.
IEEE floats lack sufficient precision to distinguish 32.9 + 1.0e-6 from 32.9 as the delta remains an absolute value.
Basically you can't really draw a complete circle using a single elliptical arc, you should do it with two half circles.
Just remove the e-6 from the end.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="152.4mm" height="152.4mm" viewBox="0 0 152.4 152.4">
<path d="M 1,1 l 151.4,0.0 l 0.0,151.4 l -151.4,0.0 Z" stroke="black" fill="white" />
<path d="M 30.162498,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
<path d="M 55.5625,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
<path d="M 80.962494,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
<path d="M 106.362495,32.9 a 4.7625,4.7625 0.0 1,0 0.0,1.0 Z" stroke="black" fill="white" />
</svg>
I have svg file exported from flash, I can open that file in Inkscape and I see clouds and a girl. In browsers the girl is visible but the clouds not. In svg they are the same symbol in defs with two groups, and a use element with xlink:href
The cloud that are not visible look like this:
<defs transform="matrix(1 0 0 1 0 0) ">
<symbol id="Symbol__202" viewBox="0 0 94.9 52.4">
<g id="Warstwa.__202">
<g id="group1">
<path id="path27" fill="#FFFFFF" fill-opacity="1" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z M385.45,18.8 L385.45,18.9 385.35,18.9 385.45,18.8z M375.5,34.75 C375.7,34.45 375.9,34.2 376.15,34 376.2,34.05 376.25,34.1 376.25,34.25 376,34.4 375.75,34.6 375.5,34.75z"/>
<path id="path28" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z"/>
<path id="path30" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M385.45,18.8 L385.35,18.9 385.45,18.9 385.45,18.8z"/>
<path id="path35" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M375.5,34.75 C375.75,34.6 376,34.4 376.25,34.25 376.25,34.1 376.2,34.05 376.15,34 375.9,34.2 375.7,34.45 375.5,34.75z"/>
</g>
</g>
</symbol>
</defs>
...
<use xlink:href="#Symbol__202" id="Symbol.__203" width="94.9" height="52.4"
x="0" y="0" transform="matrix(1 0 0 1 813.15 14.5)" overflow="visible"/>
and is the same as a girl
<use xlink:href="#dziewczynka" id="dziewczynka1" width="80.1" height="187.8"
x="-40.05" y="-93.9" transform="matrix(1 0 0 1 50 200)" overflow="visible"/>
I tried to remove the dot from ID in the cloud but it didn't change anything. Why the clouds are not visible in the browser?