svg: can anyone help me to draw an arc? - svg

I'm trying to draw an arc with SVG but I'm stucked.
The goal is to get a figure like this:
what I get instead is this:
Those are the SVG tags I'm playing with:
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
<path d="M 100 50
a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>
Can anybody help me to understan what's wrong on my node?


<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
<!--
<path d="M 100 50
a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
-->
<path d="M 50 50
a 50,50 270 1 0 25,15" stroke="black" fill="red" stroke-width="2" />
<path d="M 150 150
a 50,50 270 0 0 125,115" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>
your problem is the large-arc-flag, set it to 1
MDN Reference

Related

How to fix SVG marker orientation in MS Edge?

Trying a basic example from Mozilla Docs and the top arrow is not oriented correctly (only in Ms Edge browser) : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/orient
Is there any way to fix it for that browser?

Apparently orient="auto-start-reverse" doesn't work in edge so you will need to use orient="auto". For this instead of a polyline I'm using 2 lines with the origin in 10,90
svg{width:300px}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="dataArrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="-65deg">
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<line x1="10" y1="90" x2="90" y2="90" fill="none" stroke="black"
marker-end="url(#arrow)" marker-end="url(#arrow)" />
<line x1="10" y1="90" x2="10" y2="10" fill="none" stroke="black"
marker-end="url(#arrow)" marker-end="url(#arrow)" />
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#dataArrow)" marker-mid="url(#dataArrow)"
marker-end="url(#dataArrow)" />
</svg>
See this pen: https://codepen.io/AmeliaBR/details/qjXoQd
"auto-start-reverse SVG marker ...... Doesn't work in Edge/IE (and other older browsers) and doesn't fallback nicely (you get a non-rotating marker instead)."

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

Why does a slight adjustment to my SVG make all the circles go away?

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>

How to start svg pattern from begin for two elements separately and how to setup right coordinate system?

I have two thick lines and I want to apply pattern for this lines. Lines should have the same pattern, but start of drawing pattern should start from (0, 0) for each line separately. In my experiment http://jsfiddle.net/69t09wey/ patterns apply like mask. I.e pattern apply for whole svg canvas as invisible layer and where line is visible, pattern also visible.
<svg viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
<path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
</pattern>
<g transform="scale(5)">
<rect x="1" y="1" width="1000" height="1000"
fill="none" stroke="blue" />
<path d="M 1 9 L 200 9"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
<path d="M 1 53 L 200 53"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
</g>
</svg>

If you make your lines the same. Then move the second one by applying a transform. That will shift the coordinate space of the pattern.
<svg viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
<path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
</pattern>
<g transform="scale(5)">
<rect x="1" y="1" width="1000" height="1000"
fill="none" stroke="none" />
<path d="M 1 9 L 200 9"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
<path d="M 1 9 L 200 9" transform="translate(0,44)"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
</g>
</svg>

Some elements not visible in browser in svg image

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?

Resources