Firefox：将边框/轮廓 CSS 属性应用于 SVG 元素答案

【问题标题】：Firefox: Applying border/outline CSS properties to SVG elementsFirefox：将边框/轮廓 CSS 属性应用于 SVG 元素
【发布时间】：2013-06-24 08:44:52
【问题描述】：

Firefox 似乎完全忽略了为 SVG 元素定义的 border 和 outline CSS 属性。 SVG 组元素<g>，在我的例子中，用于将复合元素组合成一个逻辑元素，以简化我的应用程序中的用户交互。以下代码在 Chrome 中运行良好：

<svg>
    <g>
        <rect x="10" y="10" width="50" height="50" fill="yellow"></rect>
        <rect x="20" y="20" width="30" height="30" fill="yellowgreen"></rect>
    </g>
</svg>

g:hover {
    outline: dashed 4px red;
}

http://jsfiddle.net/QQRPj/

在 Chrome 中，一旦您将鼠标指针移到由两个矩形组成的组上，该组周围就会出现一个红色虚线矩形。但是，我无法让它在 Firefox 中运行，尽管它似乎支持更简单的 CSS 属性，如 cursor、display，以及与 SVG 相关的属性，如 described at MDN。

是否有机会让 outline 和 border CSS 属性在 Firefox 中工作，因此 CSS 更改可能是唯一有效的补丁，而不是修补与 SVG 相关的代码？

【问题讨论】：

标签： css firefox svg

【解决方案1】：

SVG 规范有一个all CSS properties that are valid for SVG 列表，边框和轮廓不在该列表中，因此不适用于 SVG。你应该提出一个blink bug

如果您想要 SVG 中的边框或轮廓，您必须在对象周围放置一个 <rect>，并在必要时使用 getBBox 计算 <rect> 的位置。在上述情况下，您可以将鼠标悬停在外部 <svg> 元素上，因为它是一个被替换的元素，因此会获得边框和轮廓属性。

【讨论】：

感谢getBBox()的回复和建议。关于 JsFiddle 的示例，如果我理解正确的话：该 CSS 规则将任何 <g> 标记为可悬停，而不是整个 <svg> 容器（只需放置另一个组）。