I'm trying to draw this letters
with svg path but on B letter, when I try to draw lines, the lines are joined and I don't understand why.
This is what I've done so far:
<path class="path" d="M0 117 L 0,0 65,0 65,25 30,25 30,45 65,45 65,70 30,70 30,90 65,90 65,117 0,117 z" stroke="black" stroke-width="1" fill="transparent"/>
<path class="path" d="M80 117 L 125,0 125,100 z" stroke="black" stroke-width="1" fill="transparent"/>
</svg>
https://jsfiddle.net/hpc2rvtd/4/
Any help would be appreciated!
Thanks in advance.
Related
I have the Main.svg and the Template.svg files.
I want to programmatically insert Template.svg into Main.svg.
For this:
In Inskape I place the Template in a specific place and remember the coordinates
In Template.svg - set the specified coordinates
After the programmatically insertion, I get the Template offset from the position at which it should be located (-25.1632)
What could be the problem? The coordinates of the template inserted into Inskape and the coordinates of the template inserted programmatically match. Where is my mistake?
In Inskape:
Main.svg
<svg width="210mm" height="148mm" version="1.1" viewBox="0 0 210 148" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#000">
<path d="m4.3752 45.005h197.92" stroke-width="2.0845"/>
<path d="m43.631 44.417 5.63e-4 -1.1146 0.0074-11.603" stroke-width=".81503"/>
<path d="m59.98 67.884 5.6e-4 -1.9765 7e-3 -20.575" stroke-width="1.0815"/>
<path d="m10.497 107.41h88.438" stroke-width="1.3934"/>
<path d="m58.872 107.49 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
<path d="m90.583 113.94 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
</g>
<g fill="none" stroke="#000">
<path d="m137.75 107.95 2e-3 -0.59045 0.024-6.1464" stroke-width="1.0653"/>
<path d="m169.46 114.4 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
<path d="m127.41 107.5h63.336" stroke-width="1.1792"/>
<path d="m137.77 67.877 5.6e-4 -1.9765 7e-3 -20.575" stroke-width="1.0815"/>
<path d="m101.25 44.632 5.7e-4 -1.1146 7e-3 -11.603" stroke-width=".81503"/>
<path d="m178.71 43.825 5.7e-4 -1.1146 7e-3 -11.603" stroke-width=".81503"/>
</g>
<!--<g> Place for the Template group </g>-->
</svg>
In Template change translate(-10.664053 22.731272) on translate(65.438 9.0453)
Template.svg
<g transform="translate(-10.664053 22.731272)">
<rect x="33.101" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m38.32 14.248h-5" stroke-width=".44444"/>
<g stroke-width=".4">
<path d="m35.82 5.6385v5" opacity=".98"/>
<path d="m35.82 17.869v5"/>
<path d="m37.07 10.74h-2.5"/>
<path d="m37.07 17.818h-2.5"/>
</g>
</g>
</g>
In Browser:
In the browser I see following code. If the translates (translate(65.438 9.0453)) are equal, why are the two elements not the same?
<svg>
...
<!--Inskape-->
<g transform="translate(65.438 9.0453)">
<rect x="33.101" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m38.32 14.248h-5" stroke-width=".44444"/>
<g stroke-width=".4">
<path d="m35.82 5.6385v5" opacity=".98"/>
<path d="m35.82 17.869v5"/>
<path d="m37.07 10.74h-2.5"/>
<path d="m37.07 17.818h-2.5"/>
</g>
</g>
</g>
<!--programmatically insert-->
<g transform="translate(65.438 9.0453)">
<rect x="7.9378" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m13.156 14.248h-5 " stroke-width=".4"/>
<g stroke-width=".4">
<path d="m10.656 5.6385v5" opacity=".98"/>
<path d="m10.656 17.869v5"/>
<path d="m11.906 10.74h-2.5"/>
<path d="m11.906 17.818h-2.5"/>
</g>
<title></title>
</g>
</g>
</svg>
I realized that there was no offset, it was necessary to place all the elements on one canvas. When copying elements from other canvases - there will be an offset.
Thanks Robert Longson for the tip.
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
on the kitchensink demo (link), i'm trying to load this svg (grouped):
<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="DEFAULT" display="visible">
<path d="M291.94 240.98L292.64 240.79M292.64 240.79L293.16 240.27M293.16 240.27L293.35 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M293.35 208.24L293.16 207.54M293.16 207.54L292.64 207.02M292.64 207.02L291.94 206.84"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M293.35 208.24L293.35 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 223.91"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 208.24"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 206.84L231.82 207.02M231.82 207.02L231.31 207.54M231.31 207.54L231.12 208.24"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 239.57L231.31 240.27M231.31 240.27L231.82 240.79M231.82 240.79L232.52 240.98"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 206.84L291.94 206.84"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 240.98L291.94 240.98"
fill="none" stroke="black" stroke-width="0.5"/>
</g>
</svg>
results is :
as you can see, i have strange selected area... how i can fix the svg in order to obtain correct control area on selecting object?
thanks in advance
You would need to add these attributes to your SVG so that it's just looking at a portion of the SVG at its current coordinates.
<svg ... viewBox="231.12 206.84 62.23 34.14">
(I "cheated" to get these values by opening the SVG in Illustrator, changing the artboard to extend only to the edges of the paths, then saving the file again to see what viewBox values it would give me (though of course if you can wrap your head around how the "d" attribute works, which I still can't fully do :), you can presumably just get them with just some arithmetic).)
I have to draw the solar system in a svg file, so I have to draw an ellipse in a svg as a path.
Someone could help me?
<!--Venus-->
<path id="venere" fill="none" stroke="white" stroke-width="2"
d="
M 650, 300
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
"
/>
<circle cx="100" cy="100" r="10" fill="green">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath xlink:href="#venere"/>
</animateMotion>
</circle>
This create a circle, but I need an ellipse
You're getting a circle because the rx and ry values of the elliptical arc are both 75 (they are the two values immediately after the a command). If they were different you'd get an ellipse.
Here is a solution with simplified code, where the ellipse is draw in a single stroke, as opposed to being draw as two halves.
<path id="venere" fill="none" stroke="white" stroke-width="2"
d="M 650, 150 a 75,150 0 1,0 1,0"/>
In addition to the previous solution, if you add closepath command z to the end, you will get rid of missing pixel point. So it should be:
<path id="venere" fill="none" stroke="white" stroke-width="2"
d="M 650, 150 a 75,150 0 1,0 1,0 z"/>
I've tried unsuccessfully to replace the white triangle, the marker-start, with an inverse mask/clip-path in order to cut the end of the arrow in shape of the marker instead of painting it white.
Not sure if marker masks can be defined.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="mySVG" viewBox="-100 0 200 200" height="600" width="700">
<defs>
<marker refY="0.5" refX="0.0" markerHeight="4" markerWidth="2" orient="auto" id="head">
<path fill="#D0D0D0" d="M0,0 L0.5,0.5 L0,1 L-0.5,0.5 Z"/>
</marker>
<marker refY="0.6" refX="0.1" markerHeight="4" markerWidth="2" orient="auto" id="tail">
<clip-Path id="cp1" d="M0 0 V1.3 L0.6 0.6 Z">
<path fill="white" d="M0 0 V1.3 L0.6 0.6 Z" />
<clip-Path>
</marker>
</defs>
<path id="myArrow" marker-start="url(#tail)" marker-end="url(#head)" d="M -66.38265586443396 22.21132594835645 A 70 70 0 0 0 66.38265586443396 22.21132594835645" fill="none" stroke="#D0D0D0" stroke-width="8" clip-path="url(#cp1)"/>
Markers are independent symbols which are positioned and drawn at the various points in the path after the path has been drawn.
It sounds like you are trying to use them to clip out bits of the path. This is futile. That's not how markers work, I'm afraid.