Must be something very trivial, but I'm unable to figure out why the line is not being drawn between the two points (represented by circles).
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-10 -10 80 90"
width="400" height="400" version="1.1">
<path d="M 0 31.5 V 0,72" fill="none" id="bust" stroke="black"/>
<circle cx="0" cy="31.5" r="5"/>
<circle cx="0" cy="72" r="5"/>
</svg>
Output in Firefox
As Robert Longson points out, I only need single value after V.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-10 -10 80 90"
width="400" height="400" version="1.1">
<path d="M 0 31.5 V 72" fill="none" id="bust" stroke="black"/>
<circle cx="0" cy="31.5" r="5"/>
<circle cx="0" cy="72" r="5"/>
</svg>
Related
i have an svg graphic but wanted to mirror it without changing the coordinates of the line/stroke but swap the position of the arrowhead and circle… is there a more efficient way of doing this? one thing that i thought about is changing the angle of each arrowhead and circle but is tedious to do. another suggestion is using transform matrix. does anybody know how to do this? thanks in advance.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" />
<g fill="#4caf50" id="test">
<polygon class="one" points="201.6,79 202.1,77.7 195.7,75.1 198.8,68.9 197.5,68.3 193.8,75.9"/>
<path class="two" d="M461.6,138.1c0.8,1.4,2.7,1.9,4.1,1.1s1.9-2.7,1.1-4.1c-0.8-1.4-2.7-1.9-4.1-1.1 C461.3,134.8,460.8,136.6,461.6,138.1z"/>
</g>
</g>
</svg>
This can be solved with the help of SVG markers. MDN and W3C
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow1" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse"
markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="5" fill="#4caf50"" />
</marker>
</defs
<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-start: url(#circle1); marker-end: url(#arrow1);
fill:none; stroke:green; stroke-width:2; " />
</svg>
Update
The angle of the marker can be changed using the attribute orient = ("180").
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrowLeft" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="170"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="arrowRight" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="5" fill="#4caf50" />
</marker>
</defs>
<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-end: url(#arrowRight); marker-start: url(#circle1);
fill:none; stroke:green; stroke-width:2; " />
<g transform="translate(0 100)" >
<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-end: url(#circle1); marker-start: url(#arrowLeft);
fill:none; stroke:green; stroke-width:2; " />
</g>
</svg>
I have this dummy svg showing a cirle with some grey figure inside
<svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" cx="43" cy="43" r="43"></circle>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-585.000000, -391.000000)">
<g transform="translate(585.000000, 391.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Oval" fill="currentcolor" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)" fill="#b8b8b8">
<g transform="translate(21.500000, 27.823529)" id="Page-1">
<path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path>
</g>
</g>
</g>
</g>
</g>
when I convert it to a sprite using gulp-svg-sprite with mode symbol I get this result
<?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg>
Now the grey figure breaks out of the circle and this even happens if I copy root defs- and g-tags from my original svg directly into the symbol-tag. I have also tried inserting a clipPath in the symbol version but with no luck.
What am I missing here?
UPDATED: Simplifying your svg may work ... try with the examples below, one using symbols, one without (in case the gulp sprite code cannot have nested symbols) ... it may be an issue with the defs area.
svg {
width: 100px;
}
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="c">
<circle cx="43" cy="43" r="43" fill="currentColor" />
</symbol>
<mask id="mask" color="#fff">
<use xlink:href="#c" />
</mask>
</defs>
<use xlink:href="#c" color="#666" />
<path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask2" color="#fff">
<circle cx="43" cy="43" r="43" fill="#FFF" />
</mask>
</defs>
<circle cx="43" cy="43" r="43" fill="currentColor" />
<path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
It is probably not a complete answer but I managed to get it work;
First I extended my defs with a clipPath using my circle
<defs>
<circle id="circle" cx="43" cy="43" r="43"></circle>
<clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath>
</defs>
Then, using the clipPath on my first group and switching from gulp-svg-sprite to gulp-svgstore (which moves the defs to the top, above the symbols) gives me what I expect both as single svg and as an svg symbol sprite.
I have inline SVG showing a simple circle, which works as expected:
<svg width="200" height="200" viewBox="-25 -25 50 50" >
<circle cx="0" cy="0" r="15" />
</svg>
This same code renders differently if I include the circle via XLink:
<svg width="200" height="200" viewBox="-25 -25 50 50">
<use xlink:href="#circle"/>
</svg>
Here is an example: Fiddle
Why would these two examples render differently?
Thanks.
Simply add overflow="visible" to your symbol
refined answer based on Robert Longson's Comment:
Even better is to move your circle inside the symbol to a position so that it's inside the viewport.
<svg style="display:none;">
<symbol id="circle">
<circle cx="25" cy="25" r="15" />
</symbol>
</svg>
<svg width="200" height="200" viewBox="-25 -25 50 50">
<use x="-25" y="-25" xlink:href="#circle" />
</svg>
<svg width="200" height="200" viewBox="-25 -25 50 50">
<circle cx="0" cy="0" r="15" />
</svg>
In the Pie chart, whenever a slice is clicked it has to be moved slightly as in the image.
This is the image
How this can be done? What I am doing is,create a virtual arg with radius 10 higher that the original one. Then to find out the distance between these.
After the distance is calculated use the X,Y value to the translate(X,Y) attribute to move the arc slice to specified point
Here is an example :
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400" version="1.0">
<g transform="translate(200 200)">
<circle cx="0" cy="0" r="150" stroke="#000" fill="none" />
<path d="M0,-150 Q0,0 106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
<path d="M0,-150 Q0,0 106.066,106.066" fill="none" stroke="red" stroke-width="3" />
<path d="M0,-150 Q0,0 -106.066,106.066" fill="none" stroke="red" stroke-width="3" />
<path d="M0,-150 Q0,0 -106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
</g>
</svg>
Hi is there any way to design the below picture with SVG or any other way?
Please find the SVG Code for the circle with head
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve">
<g>
<title>Sample</title>
<g>
<path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391
c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682
c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065
C36.8,98.747,22.501,84.307,22.501,66.682z"/>
</g>
Head
Based on the head angle in the example 332° the circle should rotate
Red Arc
Based on the start and end position of the arc it should start from there with displaying the start and end position as in the picture 50 and 180.
Please help me to design :-)
Try this i used rect and circle instead of path
svg{
background:#223D50;
}
<svg width="100%" height="100%" viewbox="0 0 100 100">
<rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
<circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
<circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
<text x="36" y="55" fill="white" font-size="5">Check</text>
</svg>