css - Firefox:将边框/轮廓 CSS 属性应用于 SVG 元素

Question

Firefox 似乎完全忽略 border和outline为 SVG 元素定义的 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>将物体绕圆并计算 <rect>如有必要，使用 getBBox 定位。在上述情况下，您可以将鼠标悬停在外部 <svg> 上元素，因为它是一个被替换的元素，因此确实获得了边框和轮廓属性。