2

Firefox 似乎完全忽略了为 SVG 元素定义border的outlineCSS 属性。在我的例子中， 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 相关属性，如MDN 中所述。

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

4

1 回答 1

2

SVG 规范列出了所有对 SVG 有效的 CSS 属性，边框和轮廓不在该列表中，因此不适用于 SVG。你应该提出一个眨眼错误

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

于 2013-06-24T09:19:06.500 回答