Question

我正在尝试在反应组件上嵌入svg文件，但它会像flattaned一样附加。有没有办法将其发布为纯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;

提前感谢。

Answer 1

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

这可以用于较小的svg文件

以下是codepen示例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编辑器

如何在React组件上放置svg文件unflataned

1 个答案: