Заливка участка g при наведении на SVG

371

29 июня 2017, 02:51

Добрый день. Никак не могу изменить цвет у некоторой g в svg при наведении.

На странице есть картинка SVG=logo c одной из G=d1

Вставка:

<svg  class="logo" width="74" height="22">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use>
</svg>

Теперь хотелось бы, чтобы при наведении на svg менялась заливка g-шечки на другой цвет.

.d1 {
fill: #D22856;
}
.d1:hover {
fill: #283645;
}
.logo:hover {
fill: #283645; 
}
.logo:hover g {
fill: #283645; 
}
.logo:hover #d1 {
fill: #283645; 
}

Чего только не пробовал - ничего не помогает. Буду признателен за совет.

Answer 1

Вот простой пример, здесь даже не надо много знать о svg։

<svg  class="logo" width="150" height="150"> 
    <style> 
        .circle_g>circle{ 
            stroke-miterlimit: 5; 
            fill:black; 
        } 
        .circle_g:hover>circle{ 
            fill: red; 
            stroke: red; 
        } 
    </style> 
    <g class="circle_g"> 
        <circle cy=100 cx=100 r=40 fill=black stroke="black" stroke-width="20"></circle> 
    </g> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use> 
</svg>

.circle_g>circle{ 
    stroke-miterlimit: 5; 
    fill:black; 
} 
.circle_g:hover>circle{ 
    fill: red; 
    stroke: red; 
}

<svg  class="logo" width="150" height="150"> 
    <g class="circle_g"> 
        <circle cy=100 cx=100 r=40 fill=black stroke="black" stroke-width="20"></circle> 
    </g> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use> 
</svg>

CSS можете подключить как душа пожелает.