0

在悬停时的 svg 中，我可以更改组的不透明度，如何更改组中所有成员的填充颜色？当悬停在组内的任何元素上时，我想更改组所有成员的填充颜色。

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="756.006px" height="576.006px" viewBox="0 0 10500 8000">


<style><![CDATA[
.region:hover
{

  fill: #00FF00 !important;
  opacity: .5;

} ]]>
</style>


 <g id="11" class="region"  cursor="pointer" pointer-events="all">
    <rect  style=" fill: #000000; stroke: none;"
        x="1990" y="2347" width="1866" height="1605"

    />
    <ellipse  style="fill: #FF0000; stroke: none;"
        cx="6011" cy="3239" rx="713" ry="768"
    />
 </g> 
</svg>
4

1 回答 1

1

用*选择器。

.region:hover *
{

  fill: #00FF00;
  opacity: .5;

}

但是，这不是完整的解决方案，因为您需要稍微修改 SVG。原因是style元素上的属性会覆盖 CSS。因此，您需要 (a) 将 SVG 元素颜色定义为属性（见下文），或者 (b) 也使用 CSS 规则定义它们。

因此，对于（a），您需要执行以下操作：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="756.006px" height="576.006px" viewBox="0 0 10500 8000">


<style><![CDATA[
.region:hover *
{

  fill: #00FF00;
  opacity: .5;

} ]]>
</style>


 <g id="11" class="region"  cursor="pointer" pointer-events="all">
    <rect  fill="#000000" stroke="none"
        x="1990" y="2347" width="1866" height="1605"

    />
    <ellipse  fill="#FF0000" stroke="none"
        cx="6011" cy="3239" rx="713" ry="768"
    />
 </g> 
</svg>

http://jsfiddle.net/XDvR9/

于 2013-11-03T01:09:31.437 回答