Изменение цвета заливки при наведении на группу элементов

В 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>

svg
person Forrest Carpenter    schedule 03.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

С помощью селектора *.

.region:hover *
{

  fill: #00FF00;
  opacity: .5;

}

Однако это не полное решение, поскольку вам нужно будет немного изменить SVG. Причина в том, что атрибуты style элемента переопределяют CSS. Таким образом, вам нужно будет либо (а) определить цвета элементов SVG как свойства (см. ниже), либо (б) также определить их с помощью правил CSS.

Итак, для (а) вам нужно будет сделать:

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

person Paul LeBeau    schedule 03.11.2013