Question

在悬停的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>

Answer 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/

在一组元素的悬停时填充颜色更改

1 个答案: