Menu
I have an .SVG where I call with <img src="/image/arrow.svg" alt="Arrow">. Everything is good, but I would like to dynamically set a different stroke color (Not fill color...) for my SVG like <img ... style="color:red">. I read that I could use fill="currentColor" on my path,but how could I do for my stroke color?
My SVG file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>
My html:
<img src="/image/arrow.svg" alt="Arrow" style="color:red">
941
For an SVG <path> element, you can use both a color stroke and a color fill. The fill attribute colors the interior of a graphic element. When you fill an SVG path, the fill colourizes open paths too as if the last its point was connected to the first, even though the stroke color in that part of the path will not appear.
HTML uses color whereas SVG uses fill and stroke. You can get fill or stroke to use the value of the color CSS property by using the value currentColore.g. fill="currentColor"
All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle. Sorry, your browser does not support inline SVG. The stroke-width property defines the thickness of a line, text or outline of an element: Sorry, your browser does not support inline SVG.
Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same css color naming schemes that you use in HTML, whether that's color names (that is red ), rgb values (that is rgb (255,0,0) ), hex values, rgba values, etc.
As Robert Lognson correctly stated, and previously discussed on StackOverflow, svg used as an image element has a new image context, thus it does not use the document's styles, whereas an inline svg element does use them.
So the following example works:
svg.red {
color: red;
}<svg class="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
