3

我正在尝试设计一个使用 SVG 画布（完整的应用程序使用 d3）和画布上绘制的图像元素的交互。我希望每个图像在用户悬停或单击图像时以某种方式发生变化，以表明它已被选中。我能想到的最基本的样式更改是更改图像的轮廓（即在其周围画一个边框），这在 Chrome 23/Chromium 20 上运行良好。但是它对 Firefox 16 没有任何影响。

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

代码：

<!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>

关于如何实现这种跨浏览器效果的任何想法？

提前致谢！

4

1 回答 1

1

如果您不限于使用 png 图像，并且可能将图标形状图像（如放大镜）用作 svg 路径，则可以使用 JQuery 为其填充、描边等设置动画。这是我为另一个关于动画的 SO 问题制作的小提琴悬停时的颜色变化，您可能可以重新调整用途。

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

在您的情况下，您希望将 JQuery UI Color 插件挂钩更改为

jQuery.Color.hook('stroke');

以获得轮廓效果。那个小提琴应该在 IE9 和所有当前版本的 Firefox、Opera、Chrome 和 Safari 中工作

编辑

我更新了你的小提琴，通过将图像元素包装在一个具有相同大小和图像位置的空矩形组中，在 chrome 和 firefox w css（尚未测试其他浏览器）中获得相同的效果。不知道为什么它不会在没有 rect 元素保持打开的情况下使 group 元素成为图像元素的大小。为每个图像元素添加重复的空矩形可能并不理想，但可能比为我的原始小提琴制作 svg 路径更容易解决方案

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

于 2012-11-14T22:08:16.053 回答