Использование стилизованных компонентов для изменения цвета обводки SVG

Question

У меня есть SVG, который я использую как тег <img>.Используя стилизованные компоненты, я пытаюсь добраться до точки, где я изменяю цвет обводки при наведении.

Я импортировал 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 отображает следующее:

Isвозможно ли обновить класс в SVG, загруженном в тег <img>?или это должен быть встроенный тег <svg>?

Answer 1

Итак, я посмотрел на это.Оказывается, вы не можете стилизовать CSS изображение SVG, которое вы загружаете, используя тег <img>.

Я сделал следующее:

Я добавил свой 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>

Затем я использовал Styled Components для стиля BurgerImageStyle:

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

Это сработало.