反应，反应-svg。如何恢复原来的颜色

Question

我有一组.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;
      }
      &:hover {
        path,
        rect,
        circle {
          fill: initial;
          color: initial;
        }
      }
}

这显然行不通！我不是 svgs 专家，所以任何建议（即使不使用 react-svg）都非常受欢迎。

Answer 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>