如何在React中显示带有多个标签的动态SVG？

Question

我正在尝试在反应网站中显示带有多个标签的SVG。后来我想交换svg内容并需要重新安排位置的功能，这就是为什么我没有使用任何其他工具来处理静态SVG。

在将纯SVG代码（参见下面的）添加到我的Component return语句中时，我遇到了几个问题：

1. xmlns 标记导致 TypeError：name.toLowerCase不是函数
2. 删除 xmlns 标记时： defs 和元数据标记导致与1中相同的错误。
3. 从2.中删除问题代码时， rect 的样式属性会导致问题：

错误： style prop期望从样式属性到值的映射，而不是字符串。例如，使用JSX时样式= {{marginRight：spacing +'em'}}

这只是格式化问题吗？我是否只需要在样式标记周围放置特定的Brackets组合，或者在解析SVG标记时是否存在问题，因为（可能）需要xmlns定义来告诉浏览器有关svg标记的有效信息？

信息：在svg中放置一个简单的内容（例如一个圆圈）时，它可以正常工作（在1.和2中没有定义有问题的标签。）。

这是我的样本SVG：

<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    id="svg2"
    viewBox="0 0 545.71427 302.85714"
    height="85.473015mm"
    width="154.0127mm">
<defs id="defs4" />
<metadata id="metadata7">
    <rdf:RDF>
        <cc:Work rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
        </cc:Work>
    </rdf:RDF>
</metadata>
<g transform="translate(-137.14285,-118.07648)" id="layer1">
    <rect
        y="118.07648"
        x="137.14285"
        height="302.85715"
        width="545.71429"
        id="rect4147"
        style="opacity:1;fill:#00b3ff;fill-opacity:1;stroke:none;stroke-width:35.43299866;stroke-linecap:round;stroke-miterlimit:3.20000005;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>