0

Добрый день. Никак не могу изменить цвет у некоторой 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; 
}

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

1
  • Вы видите тег g у вас в svg? Я нет.
    – MihailPw
    27 июн 2017 в 6:32

1 ответ 1

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 можете подключить как душа пожелает.

2
  • Спасибо за пример. Только мне нужно без style внутри svg.
    – Rotro
    27 июн 2017 в 6:46
  • @Rotro Посмотрите на обновленный ответ. 27 июн 2017 в 6:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.