Javascript 如何在React组件上放置未展开的svg文件

我试图在react组件上嵌入svg文件，但它以flattaned形式附加。有没有办法将其发布为纯svg

请查看其发布位置

它是如何被支持的

我以前是这样的

从“../assets/images/landing/WordCloud_ahmet.svg”导入WordCloud

---

提前感谢。

好吧，您可以内联简单的svg，但是您必须将svg中的所有样式属性转换为JSX类型的样式属性，从类到类名

对于较小的svg文件，可以这样做

下面是代码笔示例

函数SvgWithXlink（道具）{
返回(
{`.classA{fill:${props.fill}}`}
黑色
{props.fill}
蓝色
);
}
ReactDOM.render（，document.querySelector（'body>div'）；

有关更多信息，请参阅此问题

因为ur svg文件非常大，所以最好将其展平

如果您通过展平导入它，将来编辑它也会更容易，如果您想更改某些内容，只需在任何svg编辑器中导入即可

但是，如果将其转换为JSX样式，则无法将其导入任何SVG编辑器

    function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="70" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}


ReactDOM.render(<SvgWithXlink fill="violet" />, document.querySelector('body > div'));