Home/ Questions/Q 8895629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T23:49:52+00:00

I’m trying to design an interaction that uses an SVG canvas (the full app

  • 0

I’m trying to design an interaction that uses an SVG canvas (the full app uses d3) and image elements drawn on the canvas. I’d like each image to change somehow when the user hovers or clicks on the image, to show that it is selected. The most basic style change I could think of is changing the outline of the image (i.e. draw a border around it), and this works fine on Chrome 23/Chromium 20. However it does not have any effect on Firefox 16.

jsFiddle: http://jsfiddle.net/RSLsy/

Code:

<!DOCTYPE HTML>
<html>
<body>

<style>
.map {
    background-color: blue;
}
.button:hover {
    outline: solid medium black;
}
</style>

<div>
<svg width="400" height="300" class="map">
    <image class="button" xlink:href="http://www.gstatic.com/ui/v1/button/search-white.png"
        x="10" y="10" width="20" height="20"/>
</svg>
</div>

</body>
</html>

Any ideas for how I can achieve this type of effect cross-browser?

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you aren’t limited to using png images and could potentially have icon shape images like the magnifying glass as svg paths, you can use JQuery to animate their fill, stroke, etc. Here is a fiddle I made for another SO question regarding animating color change on hover that you might be able to repurpose.

    http://jsfiddle.net/webchemist/hBHBn/

    in your case you would want to change the JQuery UI Color plugin hook to

    jQuery.Color.hook('stroke');

    to get an outline effect. That fiddle should work in IE9 and all current versions of Firefox, Opera, Chrome and Safari

    Edit

    I updated your fiddle to get the same effect in chrome & firefox w css (havent tested other browsers) by wrapping the image element in a group with an empty rectangle the same size and location of the image. Not sure why it wont make the group element the size of the image element without the rect element holding it open.. Adding duplicate empty rectangles for each of your image elements is probably not ideal but might be easier than making svg paths for my original fiddle solution

    http://jsfiddle.net/RSLsy/2/

    • 0