将矢量图形嵌入到ReactJS中
可以将SVG标记嵌入到ReactJS组件中吗？
render: function() {
return (
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
</span>
);
}导致错误的结果：
不支持
命名空间属性。ReactJSX不是XML。
做这件事最简单的方法是什么？对于我想要做的事情来说，使用像React ART这样的东西太夸张了。
回答 7
Stack Overflow用户
发布于 2015-06-02 01:40:02
更新2016-05-27
从React v15开始，React中对SVG的支持与当前浏览器对SVG (source)的支持(接近？) 100%相同。您只需要应用一些语法转换来使其与JSX兼容，like you already have to do for HTML (class className，style="color: purple" style={{color: 'purple'}}→→)。对于任何名称空间(冒号分隔)属性，例如xlink:href，删除:并将属性的第二部分大写，例如xlinkHref。下面是一个具有<defs>、<use>和内联样式的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="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
</svg>
);
}有关特定支持的更多详细信息，请查看文档的list of supported SVG attributes。下面是(现已关闭的) GitHub issue，它跟踪对名称空间的SVG属性的支持。
上一个答案
只需剥离名称空间属性，就可以在不使用dangerouslySetInnerHTML的情况下执行简单的SVG embed。例如，这是可行的：
render: function() {
return (
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"/>
</svg>
);
}在这一点上，您可以考虑添加像fill这样的道具，或者其他任何可能需要配置的东西。
Stack Overflow用户
发布于 2014-05-02 01:41:14
如果您只想包含一个静态svg字符串，则可以使用dangerouslySetInnerHTML
render: function() {
return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}React将直接包含标记，而根本不对其进行处理。
Stack Overflow用户
发布于 2015-11-08 18:47:00
According to a react developer，您不需要命名空间xmlns。如果需要xlink:href属性，可以使用react 0.14中的xlinkHref
示例
Icon = (props) => {
return <svg className="icon">
<use xlinkHref={ '#' + props.name }></use>
</svg>;
}https://stackoverflow.com/questions/23402542
复制相似问题
腾讯云开发者
