CSS大纲属性未在Firefox中显示SVG图像？_Css_Image_Firefox_Svg

CSS大纲属性未在Firefox中显示SVG图像？

css image firefox svg

CSS大纲属性未在Firefox中显示SVG图像？,css,image,firefox,svg,Css,Image,Firefox,Svg,我试图设计一个使用SVG画布（整个应用程序使用d3）和画布上绘制的图像元素的交互。我希望当用户在图像上悬停或单击时，每个图像都会有所改变，以显示它已被选中。我能想到的最基本的风格变化是改变图像的轮廓（即在其周围画一个边框），这在Chrome 23/Chrome 20上效果很好。但是它对Firefox16没有任何影响 jsFiddle：代码： .地图{ 背景颜色：蓝色； } .按钮：悬停{ 外形：纯色中黑色； } 关于如何在跨浏览器中实现这种效果，有什么想法吗提前谢谢如果您不局限于使用p

我试图设计一个使用SVG画布（整个应用程序使用d3）和画布上绘制的图像元素的交互。我希望当用户在图像上悬停或单击时，每个图像都会有所改变，以显示它已被选中。我能想到的最基本的风格变化是改变图像的轮廓（即在其周围画一个边框），这在Chrome 23/Chrome 20上效果很好。但是它对Firefox16没有任何影响

jsFiddle：

代码：


.地图{
背景颜色：蓝色；
}
.按钮：悬停{
外形：纯色中黑色；
}

关于如何在跨浏览器中实现这种效果，有什么想法吗

提前谢谢

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

在您的情况下，您可能希望将JQuery UI颜色插件挂钩更改为

jQuery.Color.hook（'stroke'）
以获得轮廓效果。这把小提琴应该可以在IE9和所有当前版本的Firefox、Opera、Chrome和Safari中使用
编辑
我更新了你的fiddle，在chrome&firefoxwcss（还没有测试过其他浏览器）中获得了同样的效果，方法是将图像元素包装在一个组中，并使用一个与图像大小和位置相同的空矩形。不知道为什么在没有rect元素保持打开的情况下，它不能使group元素与image元素的大小相同。。为每个图像元素添加重复的空矩形可能并不理想，但可能比为我最初的fiddle解决方案创建svg路径更容易
SVG per中没有outline这样的属性，也许你应该针对Chrome提出一个bug，让你觉得有。非常有用的图表。我也没看到谢谢罗伯特，这很有帮助！不幸的是，像“笔划”这样的样式属性似乎都不适用于图像。@链接中附录中的RobertLongson是信息性的，而不是规范性的。文档中提到了outline属性，由于它非常有用，我认为Chrome做得很好。@isar SVG规范的其余部分是规范性的，也不是他们的。如果你在文档中找到了它，请用一些w3c官方信息来回答这个问题。谢谢WebChemist，这是一个非常有创意的解决方案！
<!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>