0

I'm trying to recolor the stroke and fill of a simple SVG graphic, in this case a rotated ellipse. I've defined the SVG inline as a symbol and am using it in my code with a new class for each instance, so it can be styled differently.

The fill color of each shape is correctly styled, but the stroke style isn't showing up, it's default blue on both instances.

What obvious thing am I missing to style the stroke as well as the fill?

I have tested this in Chrome and Firefox on Linux.

Here's my test page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>SVG Test</title>
<style type="text/css">

  svg.symbol {
    display: none;
  }

  .icon {
    width: 100px;
    height: 100px;
    background-color: #AAAAAA;
  }

  .type1 {
    fill: yellow;
    stroke: #FF0000;
  }

  .type2 {
    fill: green;
    stroke: #00FF00;
  }

</style>
</head>

<body>
<svg class="symbol">
  <symbol id="my_symbol">
      <g transform="translate(0 -540.36)"><ellipse class="oval" rx="284.4" ry="113.2" stroke="#04abfd" transform="matrix(.71176 -.70242 .71176 .70242 0 0)" cy="744" cx="-387.8" stroke-width="6" /></g>
  </symbol>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type1" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type2" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

</body>
</html>
Little Brain
  • 2,647
  • 1
  • 30
  • 54

1 Answers1

3

In general, inline styles has precedence over external, remove it from your SVG to make your CSS rules work. It is also recommended to use either inline or external CSS.

  svg.symbol {
    display: none;
  }

  .icon {
    width: 100px;
    height: 100px;
    background-color: #AAAAAA;
  }

  .type1 {
    fill: yellow;
    stroke: #FF0000;
  }

  .type2 {
    fill: green;
    stroke: #00FF00;
  }
<svg class="symbol">
  <symbol id="my_symbol">
      <g transform="translate(0 -540.36)"><ellipse class="oval" rx="284.4" ry="113.2" transform="matrix(.71176 -.70242 .71176 .70242 0 0)" cy="744" cx="-387.8" stroke-width="6" /></g>
  </symbol>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type1" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type2" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

Note: As pointed out by MichaelMullany, SVG has some special cases when one use use and presentation attributes, where style precedence becomes a little more complicated.

And here is sample I put together, which shows some of that

polygon {
  fill: green;
  stroke: yellow;
}
.poly2 {
  fill: gray;
  stroke: red;
}
<style>
  .poly1 { fill: lime; }
</style>
<svg width="300" height="300">
  <polygon class="poly1" fill="blue" stroke="black"
  style = "stroke-width: 5;"
  points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
  <polygon class="poly2" fill="blue" stroke="black"
  style = "stroke-width: 5;"
  points = "117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 "/>

    <polygon class="poly3" fill="blue" stroke="black"
  style = "fill: black; stroke: blue ;stroke-width: 5;"
  points = "117.6,211.1 27.9,218.3 76.7,142.7 "/>

  
</svg>
Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • But SVG presentation attributes should be lower priority than CSS classes: http://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/ – Michael Mullany Dec 06 '15 at 23:26
  • If you read this, http://tutorials.jenkov.com/svg/svg-and-css.html, under the headline "Overriding Style Sheets Locally in Shapes" it says the opposite, so I guess when SVG is inline, html page CSS precedence goes. – Asons Dec 06 '15 at 23:58
  • @MichaelMullany After some more testing and searching, http://stackoverflow.com/questions/24293880/svg-why-does-external-css-override-inline-style-for-text ... and as my solution works, your linked solution works, it seems that it is not as simple as that, as this question also use `use` and `xlink`, which obviously change things as well as where/how external CSS is put. – Asons Dec 07 '15 at 00:24
  • @MichaelMullany I also made [this fiddle](https://jsfiddle.net/c8h0gfwb/1/), which shows some more differences on where/how the "styling rule" is presented in the code... – Asons Dec 07 '15 at 00:32
  • Apparently you can't set CSS properties on a use element using a class: http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/. So it's the use element that's making things complicated. – Michael Mullany Dec 07 '15 at 01:25
  • @MichaelMullany I will update my answer with a note about this. – Asons Dec 07 '15 at 07:57