HTML5 svg image tag - opacity

Question

I sincerely hope you can help me out here. I'm using several svg images within my own application. Later, I'll add a functionality to reduce opacity to all svg elements. While this is a trivial task when using native svg elements, it doesn't appear to be working within image tag.

Here's an example: http://jsbin.com/iGAnaVi/1/edit

As you can see, when I applied opacity to group element, text tag was affected, however, image tag was not. I am aware that .svg file when viewed is nothing but native svg elements. However, I'd still rather reduce opacity to a single image tag. Is this possible?

Thank you very much in advance!

Answer 1

Just use opacity rather than fill-opacity and/or stroke-opacity