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>
Related
I would like to change only part of the color of Material icons (from google) like in the image. In the image it only shows the bottom bar changing color, not the entire A.
I went to several questions that only showed how to change the entire color of the materialize icon.
I realize that I can use svg, and I can break the image up into different paths and then specify the color of each of them as stated in jdnz's answer.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M5 17v2h14v-2z" fill="#00FFFF"/>
<path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
However, I have several images, and I don't want to create many svg's.
If you use svg you can break the image up into different paths and then specify the color of each of them.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M5 17v2h14v-2z" fill="#00FFFF"/>
<path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</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.
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>
I am new to svgs. How can i make 4 triangles attached with border inside a rectangle? See the Attached image.
Thanks in Advance.
You can do something like :
<polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/>
https://codepen.io/anon/pen/pWyxLX //octogone only
https://codepen.io/anon/pen/ZXWVKo //using 4 triangles
Here is a sample SVG that looks like your requested shape.
Explaining every element is beyond the scope of a Stack Overflow answer, but there are plenty of books and web tutorials to explain the various features of SVGs. Plus you can always read the SVG specification.
<svg width="200" height="200" viewBox="0 0 100 100">
<!-- The rect around the outside -->
<!-- 80 width and high, centred in the middle -->
<rect x="10" y="10" width="80" height="80"
fill="none" stroke="black" stroke-width="2" />
<!-- Now add triangles in the corners -->
<!-- You could use paths or polygons ->
<!-- I'll use both for comparison purposes -->
<polygon points="10,10, 40,10, 10,30"
fill="black"/>
<polygon points="90,10, 60,10, 90,30"
fill="black"/>
<!-- The final two corners we will use a <path> -->
<!-- And use a variety of path commands for fun -->
<path d="M 10,90 L 40,90 L 10,70 Z"
fill="black"/>
<path d="M 60,90 H 90 V 70 Z"
fill="black"/>
</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.