2

I am trying to make an svg image stroke color change when the mouse moves over the image. What I have now does not change the color of the stroke, and I am not sure why. If I manually change the stroke color through devtools it works fine.

I do notice that when I use an object to load an svg I get #document item in the inspector. Does that have any effect on why my color isn't changing when I mouse over the image?

<li class="nav-item">
  <a href="">
    <object data="/images/icon.svg"></object>
  </a>
</li>

.nav-item {
    svg:hover {
        path {
            stroke: #da25e7;
        }
    }
}
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
  • *Does that have any effect on why my color isn't changing when I mouse over the image?* --> yes. Using object is like using iframe, you cannot affect what is inside using outside CSS – Temani Afif Feb 14 '20 at 21:50
  • So, then is there another way for me to change the color of the svg without imbedding the svg file into the page? – Get Off My Lawn Feb 14 '20 at 21:56
  • 1
    I don't think so unless you consider some workaround to similuate color changes like filter, mix blend mode, etc ... some examples: https://stackoverflow.com/a/58450728/8620333 – Temani Afif Feb 14 '20 at 22:02

1 Answers1

2

Looks like I can directly put the style within the svg file. The downside to this is that it is used everywhere, and places that I don't want a hover effect with the image will still have one.

<svg>
  <style>
    svg:hover path {stroke: #da25e7;}
  </style>
  <rect ...>...</rect>
</svg>

Then include the file:

<object data="/images/icon.svg"></object>
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338