Draw external svg path with jQuery SVG

Question

I am using jQuery SVG to draw some shapes. I now want draw an external vector image (svg format) onto my shapes. In the past I used the plugins .image() method to draw external icons, but I now want to be able to scale the icons, especially for retina displays.

I draw the icons like so:

this.canvas.image(($parent), icon_box.x, icon_box.y , icon_box.width, icon_box.height, 'resources/img/ui/someicon.svg');

That actually works, but I'd like to control the color of the svg icon/image/path from inside my jQuery Code. The jQuery SVG image() method provides a settings parameter, but I don't know what option (if there is one) controls the color, as you can't change the color of e.g a jpg image.

So is there a way to do that? I'd also like to change the color on a mouseover event. Would you recommend not to use the image() method? I just need to fit the icon to the icon box, as the box (and so the icon inside) scales with the rest of my shapes.

Thanks alot! Nick =)

Answer 1

You can use the CSS :hover pseudo classes in SVG. You just need to define the CSS styles inside the SVG - or reference the CSS file from within the SVG.

See this question for an example: How to hover over an SVG rect?

If, for some reason, you can't edit the original SVG files, you could add a style element dynamically after loading. You could also do it by adding pointer events (onmouseover/onmouseout).