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

【问题标题】：How to place svg file unflataned on React component [closed]如何在 React 组件上放置未平面化的 svg 文件 [关闭]
【发布时间】：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；

提前致谢。

【问题讨论】：

标签： javascript css reactjs svg components

【解决方案1】：

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

这可以用于较小的 svg 文件

这里是代码笔示例Inline 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'));

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

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

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

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

【讨论】：