Как изменить цвет обводки SVG при наведении мыши на объект - PullRequest
Новая
       19

Как изменить цвет обводки SVG при наведении мыши на объект

2 голосов
/ 15 февраля 2020

Я пытаюсь изменить цвет обводки изображения SVG при наведении курсора мыши на изображение. То, что у меня сейчас есть, не меняет цвет обводки, и я не уверен почему. Если я вручную изменяю цвет обводки через devtools, он работает нормально.

Я замечаю, что когда я использую объект для загрузки svg, я получаю элемент #document в инспекторе. Имеет ли это какое-либо влияние на то, почему мой цвет не меняется, когда я наводю курсор мыши на изображение? 

<li class="nav-item">
  <a href="">
    <object data="/images/icon.svg"></object>
  </a>
</li>

.nav-item {
    svg:hover {
        path {
            stroke: #da25e7;
        }
    }
}

1 Ответ

2 голосов
/ 15 февраля 2020

Похоже, я могу напрямую поместить стиль в файл SVG. Недостатком этого является то, что он используется повсеместно, и в местах, где я не хочу, чтобы эффект наведения на изображение отображался, будет иметь его. 

<svg>
  <style>
    svg:hover path {stroke: #da25e7;}
  </style>
  <rect ...>...</rect>
</svg>

Затем включите файл: 

<object data="/images/icon.svg"></object>
...