Reactjs 作为组件导入时修改SVG内容

首先，我试图导入的SVG文件已经为其子文件提供了一个

id

和

classes

<svg id='bg-bars' width="189" height="670" viewBox="0 0 189 670" fill="none" xmlns="http://www.w3.org/2000/svg">
    <line class="bar" x1="188" x2="188" y2="500" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="177" x2="177" y2="510" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="166" x2="166" y2="520" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="155" x2="155" y2="530" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="144" x2="144" y2="540" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="133" x2="133" y2="550" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="122" x2="122" y2="560" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="111" x2="111" y2="570" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="100" x2="100" y2="580" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="89" x2="89" y2="590" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="78" x2="78" y2="600" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="67" x2="67" y2="610" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="56" x2="56" y2="620" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="45" x2="45" y2="630" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="34" x2="34" y2="640" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="23" x2="23" y2="650" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="12" x2="12" y2="660" stroke="#108F93" stroke-width="2"/>
    <line class="bar" x1="1" x2="1" y2="670" stroke="#108F93" stroke-width="2"/>
</svg>

需要注意的是，它修改了内容以及儿童的类，这意味着我现在无法为单个

行

元素设置动画，这正是我需要做的

下面是一个例子。尝试为

BGBars

svg切换每个

import

，并查看调试工具中节点的外观

---

我真的不知道幕后是什么在修改SVG。如果我不能改变它的工作方式，有没有比我提到的第二种方法更好的方法来实现目标？

你是说使用你在文章中提到的第二种方法，它修改了你的SVG内容？你能总结出一个可以重现你所面临问题的工作实例吗？@konekoya我编辑了这个问题。请看一看，我使用了您在这里提到的第二种方法进行了一些SVG定制。我相信这是正确的方法。@konekoya由于某种原因，这种方法对我来说并不太好，因为我必须将所有可设置动画的SVG放在单独的组件中，即使这些组件不可重复使用。我在寻找一个更好的解决方案。你是说使用你在文章中提到的第二种方法，它修改了你的SVG内容吗？你能总结出一个可以重现你所面临问题的工作实例吗？@konekoya我编辑了这个问题。请看一看，我使用了您在这里提到的第二种方法进行了一些SVG定制。我相信这是正确的方法。@konekoya由于某种原因，这种方法对我来说并不太好，因为我必须将所有可设置动画的SVG放在单独的组件中，即使这些组件不可重复使用。我在寻找更好的解决方案。

<svg width="189" height="670" fill="none">
  <path class="bg-bars_svg__bar" stroke="#108F93" stroke-width="2" d="M188 0v500M177 0v510M166 0v520M155 
  0v530M144 0v540M133 0v550M122 0v560M111 0v570M100 0v580M89 0v590M78 0v600M67 0v610M56 0v620M45 0v630M34 
  0v640M23 0v650M12 0v660M1 0v670"></path>
</svg>