Реагируй, реагируй-svg. Как восстановить исходные цвета

#css #reactjs #svg

Вопрос:

У меня есть набор .svg значков разных цветов для разных путей. В настоящее время я использую пакет react-svg для их визуализации, и это выглядит примерно так:

 <span>
    <ReactSVG
       src="/icons/setting.svg"
       beforeInjection={svg => {
         svg.classList.add("svg-classname");
       }}
    />
</span>

Это прекрасно работает. Теперь я хочу изменить все цвета пути на серый и вернуть все исходные цвета при наведении курсора пользователя, чего я пытаюсь достичь в своей scss работе, делая:

 .svg-classname {
      path,
      rect,
      circle {
        fill: #888;
        color: #888;
      }
      amp;:hover {
        path,
        rect,
        circle {
          fill: initial;
          color: initial;
        }
      }
}

Это явно не работает! Я не эксперт по svgs, поэтому любые предложения (даже за пределами использования react-svg ) действительно приветствуются.

Ответ №1:

Простое решение проблемы D3 для решения вашей проблемы:

 d3.selectAll('.my-svg-icon path')
  .each(function() {
    const path = d3.select(this);
    const originalColor = path.attr('fill');
    path.attr('fill', 'gray')
      .on('mouseenter', () => path.attr('fill', originalColor))
      .on('mouseleave', () => path.attr('fill', 'gray'));
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class="my-svg-icon">
  <path d="M 10,10 H 50 V 50 H 10 Z" fill="red"/>
</svg>
<svg class="my-svg-icon">
  <path d="M 10,10 H 50 V 50 H 10 Z" fill="blue"/>
</svg>