0

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?

ATL_DEV
  • 9,256
  • 11
  • 60
  • 102

3 Answers3

0

Yes you can.

SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.

Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.

That said, if you're not planning to use JavaScript, then do it with CSS instead. Updated with a working example, found here;

http://jsfiddle.net/Zp6HS/4/

Replacing the 'circle' element with your custom path, and the css properties you want to change.

Charlie
  • 4,197
  • 5
  • 42
  • 59
  • I tried this and it doesn't work. Everything I've read suggests that you can't manipulate SVG using CSS unless the SVG object is inline which means you'll need to duplicate it on the page. The rationale is that css can't cross file boundaries. – ATL_DEV Sep 29 '12 at 17:34
  • Did you actually test that? - http://jsfiddle.net/Zp6HS/1/ - It works fine on chrome. Can't vouch for other browsers, in which case, the scope of your question changes, and I would be pushed to recommend Raphael or a similar library. But yes... You can manipulate SVG attributes/properties with CSS from what I can see. – Charlie Sep 29 '12 at 18:29
  • The shape I am using is very complex. I would like to link it instead of in-lining it. – ATL_DEV Sep 29 '12 at 18:36
  • Then target the 'path' element like '#header svg path'. Tbh, I tested that on my local machine first, but to place complicated path data into js fiddle seemed impractical. It still works in much the same way. – Charlie Sep 29 '12 at 18:40
  • I am confused about 'path' do you mean URL or element drawing path. – ATL_DEV Sep 29 '12 at 18:44
  • I mean the path element in your DOM / HTML ''. – Charlie Sep 29 '12 at 18:47
  • Oops there's a cross delay. OK. Well that wasn't what I wanted. I wanted to link to an external SVG file and apply styles to it. See: http://stackoverflow.com/questions/7215009/how-to-reference-external-svg-file-in-svg-correctly – ATL_DEV Sep 29 '12 at 19:01
  • The question you should have asked, is "How do I change the style of an SVG embedded with an tag". - http://stackoverflow.com/questions/138309/is-it-possible-to-manipulate-an-svg-document-embedded-in-an-html-doc-with-javasc – Charlie Sep 29 '12 at 19:23
0

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.

Community
  • 1
  • 1
Charlie
  • 4,197
  • 5
  • 42
  • 59
-1

Can't you use the 'parent of' operator in css? Like so:

<style>
  header > svg {
   fill:blue;
  }
  body > svg {
    fill:black;   
  }
</style>
john k
  • 6,268
  • 4
  • 55
  • 59
  • No, because the SVG data is within an `` tag in a separate document and CSS does not cross document boundaries. This would work if the SVG was inline but that's not how it is in the question. – Robert Longson Oct 11 '14 at 06:04