In SVG there are different commands used such as move pen, draw line, draw curve and so on like so:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
Is there a command that lifts the pen and then sets the pen down again? As an example, is there a single value of SVG path data that would draw parallel lines that do not intersect inside a single path element?
More info on SVG on MDN.
Thanks to #RobertLongson for pointing this out.
I can use move more than once. In this case it is in the middle of the statement.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 M 10 90 H 90" stroke="red"
stroke-width="3" fill="none"/>
</svg>
Related
I have this Simple SVG with text inside, on chrome and Safari its working fine, but on FIREFOX the last alphabet of the text is not showing at all. (in this case 'l' from 'atul' is not showing on firefox.)
<svg viewBox="0 0 100 100" height="250" width="250">
<path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="1.99" style="fill: red;"></path>
<text font-size="6" text-anchor="middle">
<textPath href="#p1" startOffset="1" side="center" style="letter-spacing:1px;font-weight:600;text-transform:uppercase; dominant-baseline: ideographic;">Atul</textPath>
</text>
</svg>
just copy and paste this svg in your HTML and try to render it in Firefox.
I want to understand the problem along with solution if anyone can explain please.
Thanks in advance.
The issue is that there's trailing whitespace after the </textPath> Firefox stops the textPath processing one character too soon when it encounters that whitespace.
This is fixed in bug 1809688. It's currently scheduled to be fixed in Firefox 111, but you can try it in a nightly already.
I'm not able to explain this, but here I have three different SVG elements. The first two are modified versions of the code that I copied from your snippet. They both have the issue. And the last one is an edited version of the example on MDN. So, example 2 and 3 are how I would write the code -- using SVG attributes for most of the styling, but most importantly the pathLength should have a larger value to avoid any rendering problems.
Even though I removed all the attributes and styling possible from example 1 it still has the issue. And as I see it example 2 and 3 are exactly the same code (except from the ids referring to the paths), so I'm not able to explain the difference.
If anyone can spots the difference please comment.
Well, try to rewrite your code... 🙂
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p1" fill="none" d="M50 10 a 40 40 1 1 0 1 0 z"/>
<text>
<textPath href="#p1">Atul</textPath>
</text>
</svg>
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p2" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
pathLength="100"/>
<text font-size="6" font-weight="600" text-anchor="middle"
dominant-baseline="ideographic"
style="text-transform: uppercase;letter-spacing:1px;">
<textPath href="#p2" startOffset="50">Atul</textPath>
</text>
</svg>
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p3" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
pathLength="100"/>
<text font-size="6" font-weight="600" text-anchor="middle"
dominant-baseline="ideographic"
style="text-transform: uppercase;letter-spacing:1px;">
<textPath href="#p3" startOffset="50">Atul</textPath>
</text>
</svg>
I want to create re-usable shapes that will automatically scale to fit the size of the given viewPort when used.
My approach is to enclose the shape in a 'symbol' element, and give it a viewBox with the same size as the shape itself.
This seems to work with a circle and a rectangle, but I am having trouble with a diamond shape, drawn using a path.
I have found a solution by creating a viewBox of (-1, -1, width+2, height+2), but I would like to know if this is officially supported, or if there is a better solution.
In the following example, the first shape is drawn directly, the second shape is derived from a 'use' element. If the viewBox starts with '0, 0', the left and top pixels are missing.
<html>
<svg width="200" height="200"
style="margin:20px; border: 1px solid gray">
<path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
stroke="black" stroke-width="2"
stroke-linejoin="round" fill="transparent"
transform="translate(20, 20)"/>
</svg>
<svg style="display:none">
<symbol id="gw" viewBox="-1 -1 162 162">
<path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
stroke="black" stroke-width="2"
stroke-linejoin="round" fill="transparent"/>
</symbol>
</svg>
<svg width="200" height="200"
style="margin:20px; border: 1px solid gray">
<use href="#gw" width="160" height="160" transform="translate(20, 20)"/>
</svg>
</html>
This took me a while to debug - my issue was that I specified the viewbox as viewbox and not viewBox, so the viewBox wasn't even being applied. Check your capitalization!
It seems that negative coords for the origin are supported: https://www.w3.org/TR/SVG/coords.html implies that there is no restriction on the first two parts of a 'viewbox'. I've seen elsewhere that people sometimes use negative coords on a viewbox.
How can I build a wave on a transparent image background ?
Layout-Image:
I need the wave in the white top background.
I slightly improved version of akshay's answer. This includes two separate options.
OPTION 1
If aspect ratio doesn't have to be preserved, then the curve will change with width.
http://jsfiddle.net/f6n73avk/2/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
<path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>
OPTION 2
If the aspect ratio has to be preserved, then we have to use same units value for height and width of svg element.
http://jsfiddle.net/o1eghm7v/1/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
<path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>
See here I used width and height both as 100%. To change the colour you have to change the value of fill attribute.
Also, I have used absolute path commands as they are simpler to edit.
Explanation
M - command moves the drawing point to the the coordinates specified after it, or 0,5 (SVG coordinate system)
H draws Horizontal line to specified X-coordinate from the current point (0,5)
C draws cubic bezier, with first point coords as first handle, second second handle, and third is the end point.
S draws a cubic bezier, but its first handle is the reflection of the last handle of last C command about the end point of last C.
V draws vertical line to specified Y-coordinate.
Z closes the path, ie draws a straight line from current point to last M point.
Not exactly like it Fiddle
<svg width="500" height="200">
<path d="m 0 100 l 40 0 q 50 0 60 10 100 80 250 0,100 -20 155 0 v 200 h -500 z" stroke="red" fill="orange"/>
</svg>
I am trying to create a simple wave with SVG to put on my website. This is what I've come up with so far:
<svg height="100" width="500">
<path d="M 0 50
Q 125 0, 250 50, 375 100, 500 50
L 500 100
L 0 100
L 0 50
Z" stroke="blue" stroke-width="1" fill="red" />
</svg>
https://jsfiddle.net/a5q41t26/
The problem is that I can't align the bottom of the path with the bottom of the lower wave to avoid the gap.
Any help would be appreciated.
The first coordinate pair, of the two pairs in a Q path command, is a control point. The curve does not pass through the control point.
Have a look at the section on Quadratic bezier curves in Wikipedia.
I have a svg with multiple lines inside a path.
<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>
Because of the stroke-width the lines intersect
Is there any way of making the path continuous without altering the "d" attribute?
Edit:
I am interested in how you can control the joins of multiple objects inside the same path while having a stroke-width defined.
If I would change the "d" attribute and remove the middle Z so that the lines form a triangle the stroke problem would disappear
That's one hell of an overhang for two lines that meet at a point. (Are you using Firefox by any chance? I saw something very similar recently.)
If you want a neat join between two disjoint line segments, your best bet would be to draw them with rounded end caps by adding stroke-linejoin="round" and stroke-linecap="round" to the path element.
And if my suspicion is correct, you can fix the overhang problem by changing fill="orange" to fill="none". Try this:
<svg viewBox="50 50 400 400" width="350" height="350">
<path stroke-width="13"
stroke="black"
fill="none"
stroke-linejoin="round"
stroke-linecap="round"
d="M 100 100 L 300 100 Z L200 300 z"
/>
</svg>