Что не так с одним из 3 изображений SVG, заполнение которых не работает на нем?

Question

У меня есть 3 изображения SVG, которые находятся в здесь . Как вы можете заметить, заполнение при наведении корректно работает на двух из них, но не на пользователе.

Кажется, что это не img, встроенный в тег <svg>, это обычный svg рисунок.

Сначала я подумал, что в этом <svg> есть некоторые ошибки, которых я не знаю, и пытался использовать некоторые онлайн-ресурсы, чтобы найти эти ошибки, но это не помогло ...

Может кто-нибудь сказать, что здесь не так?

Answer 1

Это потому, что на значке пользователя есть элементы <circle> и <path>, у которых нет fill. Фактически, цвет, который вы должны изменить, - stroke. Если вы добавите следующее правило, то на вашем значке пользователя будет отображаться желаемое состояние наведения.

Чтобы стили кругов и контуров не мешали двум другим значкам, присвойте первому элементу SVG класс, например, user-icon:

svg.user-icon:hover circle,
svg.user-icon:hover path {
  stroke: red;
}

См. Пример проверки концепции:

svg {
  width: 70px;
  height: 70px;
}
svg:hover {
  fill: red !important;
}
svg.user-icon:hover circle,
svg.user-icon:hover path {
  stroke: red;
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

<div>
  
<svg class="user-icon" id="6a8da56c-64cb-4c0d-b7e3-2b80c0db2d07" data-name="ICON" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><circle id="3ad8aabf-2066-47d6-9a2f-c027e5c19606" data-name="&lt;Pfad&gt;" cx="96" cy="63.91" r="36.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path id="243fad7b-53d4-4daa-93b6-31f40d832ead" data-name="&lt;Pfad&gt;" d="M156,164.1c-6.48-43.88-33.17-64.23-59.64-64.23S42.49,120.21,36,164.09" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><rect width="192" height="192" fill="none"/></svg>
  
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path>
</svg>
  
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>
  
  
</div>

---

Еще лучше: CSS пользовательские свойства / переменные

Если вы действительно можете изменить встроенную разметку SVG, я бы предложил используя переменные CSS, чтобы вы могли лучше контролировать, какое свойство fill против stroke должно быть изменено. Просто замените все экземпляры #333 в вашей разметке, чтобы использовать var(--icon-color, тогда вы можете свободно менять цвет следующим образом:

svg {
  width: 70px;
  height: 70px;
  --icon-color: #333;
}
svg:hover {
  --icon-color: red;
}

См. Пример здесь:

svg {
  width: 70px;
  height: 70px;
  --icon-color: #333;
}

svg:hover {
  --icon-color: red;
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

<div>

  <svg id="6a8da56c-64cb-4c0d-b7e3-2b80c0db2d07" data-name="ICON" xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><circle id="3ad8aabf-2066-47d6-9a2f-c027e5c19606" data-name="&lt;Pfad&gt;" cx="96" cy="63.91" r="36.09" fill="none" stroke="var(--icon-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path id="243fad7b-53d4-4daa-93b6-31f40d832ead" data-name="&lt;Pfad&gt;" d="M156,164.1c-6.48-43.88-33.17-64.23-59.64-64.23S42.49,120.21,36,164.09" fill="none" stroke="var(--icon-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><rect width="192" height="192" fill="none"/></svg>

  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z" fill="var(--icon-color)"></path>
</svg>

  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" fill="var(--icon-color)"></path>
</svg>


</div>