Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing the stroke color for an inline SVG

Issue 1

I'm trying to change the stroke color of an inline svg on hover. It's a path exported from Illustrator and put through Peter Collingridge's SVG optimiser. The articles I read on styling inline SVG are very straight forward but the techniques won't work on my SVG.

I have placed a hover pseudo-class on the tag and can't seem to target the stroke.

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/>
</svg>

I set the background-color to pink to check that hover is working and that's fine.

.highlight:hover {
  background-color: pink;
  stroke: red;
}

Here it is on jsfiddle.

I also tried to wrap the polygon in a use tag with an id to change the stroke in CSS as well as adding the svg selector with stroke:inherit, as suggested in a Codrops article. Also, jQuery's hover method with no luck.

What am I doing wrong and why are these three techniques not working?

Issue 2

Sublime Text 2 won't recognise the stroke property. It comes up white when I type it in CSS and HTML. Does this mean it's invalid? I looked at the README file for a CSS3 plugin to see what it's adding and there's no "stroke" property. Should I be using Sublime Text 3 in beta?

All these things...

like image 828
tea Avatar asked Jun 21 '16 09:06

tea


People also ask

How do I change the stroke color in SVG?

Basic coloring can be done by setting two attributes on the node: fill and stroke . Using fill sets the color inside the object and stroke sets the color of the line drawn around the object.

How do I change the color of an SVG?

Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file. Note that currentColor is a keyword (not a fixed color in use). After that, you can change the color using CSS, by setting the color property of the element or from it's parent.

Which property is used to change the color of SVG?

The fill property in CSS is for filling in the color of a SVG shape.


2 Answers

The CSS in the SVG is inline CSS and so is being applied after your stylsheet and thus is overriding it.

The simplest solution is to xxtract the CSS from the SVG and put it all in your stylesheet.

.highlight {
  fill: none;
  stroke-width: 3;
  stroke: #491EC4;
}

.highlight:hover {
  /* background-color: pink; */
  stroke: red;
}
<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " />
</svg>
like image 126
Paulie_D Avatar answered Oct 02 '22 01:10

Paulie_D


You'll need to select the polygon tag, since that tag is styled to have a stroke. Since it's been decorated with an inline style, your css rule should use !important in order to override the inline style.

.highlight:hover {
  background-color: pink;
}
.highlight:hover polygon{
  stroke: red !important;
}
<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/>
</svg>

Disclaimer: It would be preferable to extract the inline styles and move them to their own css files (as mentioned by Paulie_D). If by any means extracting is not possible, you could go with !important

like image 24
Lars Avatar answered Oct 02 '22 02:10

Lars