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

【问题标题】：CSS outline property not showing in Firefox for SVG image?CSS 大纲属性未在 Firefox 中显示为 SVG 图像？
【发布时间】：2012-11-03 11:34:08
【问题描述】：

我正在尝试设计一种使用 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>

有什么想法可以跨浏览器实现这种效果吗？

提前致谢！

【问题讨论】：

根据w3.org/TR/SVG/propidx.html，SVG 中没有轮廓这样的属性，也许您应该针对 Chrome 提出一个错误，让您认为有。
非常有用的图表罗伯特。这里也没看到w3.org/TR/SVG/styling.html#SVGStylingProperties
谢谢罗伯特，这很有帮助！不幸的是，看起来像 stroke 之类的样式属性都不适用于图像。
@RobertLongson 您链接中的附录是信息性的，而不是规范性的。 outline 属性在文档中的某处被提及，因为它非常有用，我认为 Chrome 做得很好。
@isar SVG 规范的其余部分是规范的，它们也不是。如果您在文档中找到它，请随时使用一些官方 w3c 信息来回答这个问题。

标签： css image firefox svg

【解决方案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/

【讨论】：

感谢 WebChemist，这是一个非常有创意的解决方案！