css - 需要 SVG 的样式组件 - 但 React 不允许我用它们创建组件

Question

我正在尝试使用嵌套在 SVG 空白框中的 6 个 SVG 的 SVG 文件制作 React 组件。因为视图框，我需要嵌套它们，也因为我以后仍然需要单独定位每个 SVG。我的主要目标是将道具传递给 svg 文件的颜色。

所以为了让 SVG 文件在反应中工作，它告诉我删除我的样式组件，但是如果我没有它们，那么 SVG 的整体图像绝对会被破坏。

    viewBox="0 0 1300 1300" width="1300" height="1300" id="flower-box">

<svg version="1.1" id="peaks" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="49.9vw" y="-.05vh"
     viewBox="0 0 460 486" width="12vw" height="12.1vh" style="enable-background:new 0 0 460 486;" xml:space="preserve">

<style type="text/css">
.title { font: 4.5vh sans-serif; }
    .st0{fill:#010101;}
    
</style>
<text x="12vw" y="12vh" class="title">Peaks</text>
<path class="st0" d="M434.9,151.7c-4.8-24.5-13.2-47.5-27.8-67.9c-16.6-23.1-38.5-39.3-63.9-51c-40-18.4-82.5-23.4-125.7-24
    c-11.8-0.2-23.5,2.8-35.3,3.5c-4.2,0.3-8.4,0.5-12.5,1.3c-12.2,2.2-24.1,5.6-35.8,9.3c-19.7,6.2-38,15.3-54.6,27.8
    c-27.4,20.8-45.1,48.4-55.7,81c-7.4,23-11.3,46.7-13.5,70.6c-0.2,2.3-0.4,4.5-1.6,6.6c-1.8,3.2-1.4,6.2,1.1,8.9
    c1.3,1.4,2.9,2.3,4.5,3.2c28.2,15.9,55.2,33.6,80.4,54c35.2,28.4,67.4,59.9,97.8,93.4c4.7,5.2,9.5,10.4,13.8,15.9c1.6,2,3,3,5.3,2.8
    c5.4-0.5,10.8-0.1,16.1,0c39.2,1.1,75,12.8,106.8,36.2c17.3,12.8,31.8,28.3,41.7,47.8c0.8,1.6,1.8,3,2.9,4.3
    c0.7,0.7,1.4,1.3,2.4,1.5c5.7,1,7.5,0.2,10-5.1c0.5-1.1,1-2.2,1.4-3.3c6.7-15.8,12.4-32,17.3-48.5c19.2-64.9,29.1-131.3,30.5-188
    C440.7,197.8,439.3,174.6,434.9,151.7z M426.2,229.9c-0.9,44.5-7.4,91.2-18.3,137.3c-6.5,27.3-14.6,54.1-25.3,80.1
    c-0.5,1.3-0.6,3.1-2.1,3.4c-1.6,0.3-2.2-1.5-2.9-2.6c-19.1-26.1-44.3-44.2-73.9-56.3c-21.1-8.6-42.9-14.4-65.7-16
    c-5.1-0.4-10.1,0-15.2,0.3c-4.4,0.3-8.7-0.7-11.8-4.5C179.5,334,144.9,299.4,107.2,268c-24.9-20.8-51.5-39-79.7-55
    c-7-4-6.4-2.7-5.6-10.8c2.3-22.1,6.1-43.9,13-65.1c16-48.6,47.6-82.1,94.9-100.6c14.6-5.7,29.6-9.8,45.3-11.5
    c12.2-1.3,24.3-3.1,36.6-3.8c44.7-2.5,87.4,5.3,127.5,25.6c24.2,12.2,44,29.6,58.7,52.8c10.7,17,17.6,35.5,21.9,55.1
    C425.1,178.5,426.5,202.7,426.2,229.9z"/>
    
</svg>


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50.4vw" y="8.8vh"
     viewBox="0 0 203 199" width="11vw" height="11vh" style="enable-background:new 0 0 203 199;" xml:space="preserve">
<path d="M172.6,37.8c-13.8-14.7-31.1-23.7-51.1-27.9c-11.9-2.4-24-2.7-36-0.7C62,13.2,42.8,24.1,27.9,41.9
    C14.9,57.4,7.9,75.2,7,95.1c-0.9,19.8,4.3,38.1,15.8,54.5c18.8,26.8,45.2,40.5,78.7,41.5c7.1-0.1,13.9-0.8,20.4-2.4
    c17.8-4.1,33.1-12.7,45.7-25.4c17.3-17.4,27.2-38.1,28.3-62.2C197.1,77.1,189.4,55.8,172.6,37.8z M139.2,174.3
    c-25.9,12.7-52.3,12.5-77.8-0.6c-27.1-14-42.2-36.4-46.2-65.7c-0.2-1.8-0.4-3.6-0.4-5.4c-0.1-1.4,0-2.8,0-4.3
    c0.3-32.4,19.8-61.7,50.3-75.3c17.7-7.9,36.3-9.8,55.3-5.7c24.8,5.3,44,18.3,56.8,39.6c6.5,10.8,10,22.6,10.8,35.1
    C190.2,125.4,170.9,158.8,139.2,174.3z"/>
</svg>



</svg>

这只是 svg 中的几个设计，但我需要它们全部接触。每次我尝试取出样式组件时，即使我在 CSS 中定位它们，现在整个文件都搞砸了。截至目前，如果我只是将其作为<img id="blank" src={box1} alt="blank" />

图像完美显示，但我不确定如何在不使其成为自己的 React 组件的情况下将道具传递给 SVG 文件。但是我不能让它成为一个 React 组件，而不损坏图像。

标签： cssreactjssvg