Изображение SVG при наведении

Question

У меня есть изображение SVG для проекта, над которым я работаю. Теперь я хочу изменить цвет при наведении. У меня средний работает над Ховером. Моя проблема в том, как я могу также навести указатель мыши на линию контура.

<svg width="108" height="108" viewBox="0 0 108 108" fill="#ffffff" xmlns="http://www.w3.org/2000/svg"><circle cx="54" cy="54" r="53" stroke="#1B1D27" stroke-width="2"/><path id="hover-style-svg"d="M30 60L54.1228 48L78.5 60" stroke="#1B1D27" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

Answer 1

Попробуйте этот фрагмент кода и посмотрите, не то ли это, что вы ищете, поскольку вопрос слишком расплывчатый.

svg:hover * {
  fill: black;
  stroke: red;
}

<svg width="108" height="108" viewBox="0 0 108 108" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" onclick="alert('You have clicked on svg')">
      <circle cx="54" cy="54" r="53" stroke="#1B1D27" stroke-width="2" />
      <path id="hover-style-svg" d="M30 60L54.1228 48L78.5 60" stroke="#1B1D27" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
    </svg>