Search code examples
csssvgsvg-animatesvg-filters

SVG: Why can I not override the fill color?

I with to have a default fill and override where needed:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <circle fill="blue" id="myCircle" cx="0" cy="0" r="5" />
  </defs>

  <use class="one" x="5" y="5" href="#myCircle" />
  <use class="two" x="5" y="5" href="#myCircle" fill="red" />
</svg>

However, both circles are blue.

I also tried using CSS to set .two to fill: red, however both circles remain blue.

Why is this and can it be changed?

Solution

  • The issue

    fill="red" is ignored here, because stroke was already set on #myCircle. Most attributes (except for x, y, width and height) do not override those set in the ancestor.

    The solution

    Basicly removing the fill property on #myCircle will fix the issue.