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 border 和 outline 不在该列表中，因此不适用于 SVG。你应该提出 blink bug

如果你想在 SVG 中添加边框或轮廓，你必须输入 <rect>围绕对象并计算<rect>如有必要，使用 getBBox 定位。在上述情况下，您可以将鼠标悬停在外部 <svg> 上元素，因为它是一个替换元素，因此确实获得了边框和轮廓属性。