Изменить цвет полигона SVG при наведении - PullRequest
Новая
       16

Изменить цвет полигона SVG при наведении

0 голосов
/ 30 марта 2020

Я хочу изменить цвет каждого многоугольника SVG при наведении, используя css.

Это код hmtl: 

<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
</svg>

При наведении курсора на один из полигонов его заполнение должно превратиться в # 000.

Я уже пытался изменить цвет с помощью идентификатора: 

/*This does not work*/
#N:hover {
    fill: #000;
}

Я нашел это решение с помощью jquery, но мне интересно, можно ли этого добиться с помощью чистого css : Мои полигоны SVG не меняют цвет при наведении

Ответы [ 4 ]

1 голос
/ 30 марта 2020

Да, потому что у вас есть встроенный стиль в вашем SVG. Вы можете сохранить его и добавить! Важные для вашего css

#N {
fill: #000 !important;
}

или сделать следующее 

#N{fill: #000;}
<svg class="compass-svg" width="200" height="200">
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="N" points="100,10 125,50 100,100 75,50"/>
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="NE" points="155,45 150,75 100,100 125,50"/>
</svg>

И если вы хотите, чтобы заливка изменилась при наведении, просто добавьте: hover к # N 

#N:hover {
fill: #000 !important;
}

ИЛИ 

#N:hover{fill: #000;}
<svg class="compass-svg" width="200" height="200">
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="N" points="100,10 125,50 100,100 75,50"/>
     <polygon fill="#fff" stroke="#000" stroke-width="1" id="NE" points="155,45 150,75 100,100 125,50"/>
</svg>
1 голос
/ 30 марта 2020

Вот как я понял, как это сделать:

Это стиль 

#N:hover {
    fill: #000;
}

#NE:hover {
    fill: #000;
}

#NE {
 fill: #fff;
}
#N {
 fill: #fff;
}
<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" style="stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="stroke:#000; stroke-width: 1;"/>
</svg>
1 голос
/ 30 марта 2020

Наведение не указано c недостаточно.

  • Если вы преобразуете заполнение элемента в сопоставленное свойство CSS, оно будет работать.
  • В качестве альтернативы вы можете добавить! Важное для заливки при наведении. 

#N:hover {
    fill: red;
}
<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" fill="#fff" style="stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
</svg>
0 голосов
/ 30 марта 2020

когда вы используете встроенный стиль, вам нужно использовать! Important 

#N:hover,#NE:hover {
    fill: black!important;
}
<svg class="compass-svg" width="200" height="200">
     <polygon id="N" points="100,10 125,50 100,100 75,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
     <polygon id="NE" points="155,45 150,75 100,100 125,50" style="fill:#fff; stroke:#000; stroke-width: 1;"/>
</svg>
...