火狐：应用边界/轮廓CSS属性，SVG元素

火狐似乎完全忽略SVG元素定义border和outline CSS属性。在我的情况下，SVG组元素<g>用于将复合元素分组为单个逻辑元素，以简化用户在我的应用程序中的交互。下面的代码工作真的很好在Chrome：火狐：应用边界/轮廓CSS属性，SVG元素

<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中，一旦你在组两个矩形的移动鼠标指针，该集团得到一个红色虚线周围的矩形。然而，尽管它似乎支持更简单的CSS属性，例如cursor,display以及与SVG相关的属性（如described at MDN），但我无法在Firefox中使其工作。

是否有任何机会，使outline和border CSS属性在Firefox中工作，所以一个CSS变化可能是唯一有效的补丁而不是修修补补SVG相关的代码？

来源

2013-06-24 Lyubomyr Shaydariv

SVG规范有all CSS properties that are valid for SVG边界和轮廓的名单都没有在该列表中，因此并不适用于SVG。您应该提出一个blink bug

如果要在SVG中显示边框或轮廓，必须将<rect>放在对象的四周，并在必要时使用getBBox计算<rect>位置。在上面的情况下，您可以将悬停放置在外部<svg>元素上，因为这是替换的元素，并且因此会获取边框和轮廓属性。

来源

2013-06-24 09:19:06

感谢您对getBBox（）的回复和建议。关于JsFiddle的例子，如果我理解你的话：CSS规则将任何''标记为可容忍的，而不是整个'

火狐：应用边界/轮廓CSS属性，SVG元素

回答

相关问题