html - Is it possible to change svg (included as <img> element) styles from external css?

Question

All the solutions I can find describe dirty hacks with replacing an <img> element with inline svg, or embedding css directly into the svg. Both doesn't suit me.

What I need: the ability to change styles (fill in particular) of the svg image included to the page as <img> element.

Example html:

<img src="https://dl.dropboxusercontent.com/u/4486681/rect.svg" class="recolor-me" />

CSS that I expected to work, but it doesn't

.recolor-me {
    fill: red;
}

Sandbox to play: http://jsfiddle.net/Q4Y6k/

So, is there any way to re-color the svg following the requirements from above (without using JS or inlining svg)?

PS: it's fine if the solution is chrome only

Answer 1

No, you cannot style an embedded resource with CSS code on the embedding page, even if the embedded resouce happens to be in an XML format (or HTML format – you cannot even style an HTML document embedded with iframe using CSS code in the embedding document).