如何在 React 组件上放置未平面化的 svg 文件 [关闭]

Posted 2023-02-23

【中文标题】如何在 React 组件上放置未平面化的 svg 文件 [关闭]

【英文标题】：How to place svg file unflataned on React component [closed]

【发布时间】：2018-10-20 06:11:38

【问题描述】：

我正在尝试在 react 组件上嵌入 svg 文件，但它附加为扁平化。有什么办法可以将其发布为纯 svg。

请查看它的发布位置https://abk-react-portfolio.herokuapp.com/

以及它应该如何查看

https://abk-react-portfolio.herokuapp.com/static/media/wordcloud_ahmet.445abff9.svg

我是这样用的

从 '../assets/images/landing/wordcloud_ahmet.svg' 导入 WordCloud；

提前致谢。

【参考方案1】：

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

这可以用于较小的 svg 文件

这里是代码笔示例Inline SVG，

    function SvgWithXlink (props) 
    return (
        <svg
            
            
            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'));

有关更多信息，请参阅此问题embedding-svg-into-reactjs

由于你的svg文件很大，最好把它展平，

如果你通过展平导入它，将来编辑它也会更容易，如果你想改变一些东西，只需在任何 svg 编辑器中导入它。

但是，如果你把它转换成 JSX 样式，它就不能被导入到任何 SVG 编辑器中