使用样式化的组件更改SVG笔触的颜色

Question

我有一个<img>标签用作SVG。使用样式化组件，我试图将鼠标悬停时更改笔触颜色。

我导入了SVG：

import BurgerOpenSvg from '../../images/burger_open.svg';

我为此创建了一个样式化组件：

   const BurgerImageStyle = styled.img`
    &:hover {     
        .st0 {
          stroke: red;
        }
    }
`;

我用它：

<BurgerImageStyle alt="my-burger" src={BurgerOpenSvg}/>     

结果是，我的SVG正确显示，但悬停后没有颜色更改。

我使用的SVG的来源：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 38 28.4" style="enable-background:new 0 0 38 28.4;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#221f1f;stroke-width:2;stroke-miterlimit:10;}
</style>
<g>
    <g id="XMLID_7_">
        <line class="st0" x1="0" y1="1" x2="38" y2="1"/>
    </g>
    <g id="XMLID_6_">
        <line class="st0" x1="0" y1="14.2" x2="38" y2="14.2"/>
    </g>
    <g id="XMLID_5_">
        <line class="st0" x1="0" y1="27.4" x2="38" y2="27.4"/>
    </g>
</g>
</svg>

SVG呈现如下：

是否甚至可以在<img>标签中加载的SVG上更新类？还是必须是内联<svg>标签？

Answer 1

如果您希望避免编写单独的组件或复制原始SVG文件，请考虑index.html;

https://github.com/gilbarbara/react-inlinesvg

react-inlinesvg

代码沙箱：https://codesandbox.io/s/stack-56692784-styling-svgs-iz3dc?file=/src/App.tsx:0-414

Answer 2

所以我调查了这个。原来，您无法使用<img>标签对要加载的SVG图像进行CSS样式设置。

我所做的是这样：

我这样插入SVG：

 <BurgerImageStyle x="0px" y="0px" viewBox="0 0 38 28.4">
      <line x1="0" y1="1" x2="38" y2="1"/>
      <line x1="0" y1="14.2" x2="38" y2="14.2"/>
      <line x1="0" y1="27.4" x2="38" y2="27.4"/>
 </BurgerImageStyle>

然后，我使用样式化组件对BurgerImageStyle进行样式设置：

const BurgerImageStyle = styled.svg`
    line {
      stroke: black;
    }    
    &:hover {
      line {
        stroke: purple;
      }
    }     
`;

这行得通。