2

I am trying to implement an SVG logo and would like to dynamically change the colour of it on an event.

At the moment I have simply embedded it:

<embed class="logo" src="images/logo.svg" type="image/svg+xml"    pluginspage="http://www.adobe.com/svg/viewer/install/" />

I then use this piece of jQuery to switch the embed for an img tag for webkit browser support. 

if ($.browser.webkit) {
            $(".logo").replaceWith("<img class=logo src=images/logo.svg type=image/svg+xml pluginspage=http://www.adobe.com/svg/viewer/install/ />")
            }

Is it possible to manipulate the fill colour of the SVG using this implementation?

Cheers

Sam Quayle
  • 537
  • 5
  • 16

2 Answers2

1

You can get the referenced svg's DOM from the <embed> element, but not from the <img> element. Also see How do you access the contents of an SVG file in an <img> element?

Community
  • 1
  • 1
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
1

There is a getSVGDocument method suggested by other questions/answers but it appears to work only in Firefox: http://jsfiddle.net/mihaifm/Kqd89/

Either I'm doing something wrong or the answer to the question is No.

mihai
  • 37,072
  • 9
  • 60
  • 86
  • See http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html, which shows getSVGDocument working just fine in all browsers. – Erik Dahlström Apr 15 '12 at 14:19
  • Ok, then I must be doing something wrong in that fiddle. Probably worth another question :)) – mihai Apr 15 '12 at 14:39