Question

Depending on parent html tag of an SVG object, I would like it’s path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here’s an example:

<style type="text/css">
   #header-img {
       fill:blue;
   }

   #footer-img {
       fill:black;
   }

</style>
...
<header>
   <object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
   <object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>

Granted, this can’t be done, but is there an alternative without using JavaScript?

Answer 1

Starting again, this is the best question/answer to your problem that I can find:

How to apply a style to an embedded SVG?

It’s possible for you to add a linked stylesheet to the file you wish to embed by hand…
Thereby avoiding the use of JavaScript.

I would argue that you should try not to ask redundant questions.
We’d have both done well to have sourced this earlier.