Firefox：将边框/大纲CSS属性应用于SVG元素

Question

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相关的代码？

Answer 1

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

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