css - 带有内联 CSS 的 SVG 悬停颜色

Question

我的背景正在改变颜色，但作为一个 block 。如何更改悬停时整个背景区域的颜色？包括圆边...

http://jsfiddle.net/BenRacicot/Dr25D/1/

<style>
rect.svghover{
    fill: #4C85BD;
}
rect.svghover:hover{
    fill: #0055a5;
}

</style>

每个区域在 SVG 中看起来像这样:

<a xlink:href="http://google.com" target="_top">
<path d="M431.5,242.5c0,8.008-6.492,14.5-14.5,14.5H198.5c-8.008,0-14.5-6.492-14.5-14.5l0,0
    c0-8.008,6.492-14.5,14.5-14.5H417C425.008,228,431.5,234.492,431.5,242.5L431.5,242.5z"/>
<rect x="197.5" y="236" fill="none" width="208.5" height="22.5" class="svghover"/>
<text transform="matrix(1 0 0 1 226.9644 247.9395)" fill="#FFFFFF" font-family="'Roboto'" font-size="14">Mfg Launch</text></a>

Answer 1

我认为你不需要，如果没有矩形也可以，我这样做了:

我将 class="svghover" 添加到您的路径元素中，这是您编辑的 fiddle :
http://jsfiddle.net/piyushkmr/Dr25D/2/