将 SVG 嵌入到 ReactJS 中 [英] Embedding SVG into ReactJS

问题描述

是否可以将 SVG 标记嵌入到 ReactJS 组件中?

render: function() {返回 (<跨度><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...</span>);}

导致错误:

<块引用>

不支持命名空间属性.ReactJSX 不是 XML.

最简单的方法是什么.使用诸如 React ART 之类的东西对于我想要做的事情来说太过分了.

解决方案

更新 2016-05-27

从 React v15 开始，React 对 SVG 的支持(接近?)与当前浏览器对 SVG 的支持(来源).您只需要应用一些语法转换以使其与 JSX 兼容，就像您已经为 HTML 所做的那样 (class → className, style=color: Purple" → style={{color: 'purple'}}).对于任何命名空间(冒号分隔)属性，例如xlink:href，删除 : 并将属性的第二部分大写，例如xlinkHref.下面是一个带有 、 和内联样式的 svg 示例:

function SvgWithXlink (props) {返回 (<svg宽度=100%"高度=100%"xmlns="http://www.w3.org/2000/svg";xmlnsXlink=http://www.w3.org/1999/xlink"；><风格>{ `.classA { fill:${props.fill} }` }</风格><定义><g id=端口"><circle style={{fill:'inherit'}} r=10"/></g></defs><text y="15">black</text><使用 x=70";y=10"xlinkHref="#Port";/><text y=35">{ props.fill }</text><使用 x=70"y=30"xlinkHref="#Port";className=classA"/><text y=55">蓝色</text><使用 x=0";y=50"xlinkHref="#Port";style={{fill:'blue'}}/></svg>);}

工作代码笔演示

有关特定支持的更多详细信息，请查看文档的列表支持的 SVG 属性.这是(现已关闭)GitHub 问题，跟踪对命名空间 SVG 属性的支持.>

---

上一个回答

您可以进行简单的 SVG 嵌入，而无需使用 dangerouslySetInnerHTML，只需剥离命名空间属性即可.例如，这有效:

 渲染:function() {返回 (<svg viewBox=0 0 120 120"><圆cx=60"cy=60"r＝50"/＞</svg>);}

此时您可以考虑添加像 fill 这样的道具，或者其他任何可能对配置有用的东西.

Is is possible to embed SVG markup into a ReactJS component?

render: function() {
  return (
    <span>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
    </span>
  );
}

Results in the error:

Namespace attributes are not supported. ReactJSX is not XML.

What is the lightest way of doing this. Using something like React ART is way overkill for what I'm trying to do.

解决方案

Update 2016-05-27

As of React v15, support for SVG in React is (close to?) 100% parity with current browser support for SVG (source). You just need to apply some syntax transformations to make it JSX compatible, like you already have to do for HTML (class → className, style="color: purple" → style={{color: 'purple'}}). For any namespaced (colon-separated) attribute, e.g. xlink:href, remove the : and capitalize the second part of the attribute, e.g. xlinkHref. Here’s an example of an svg with <defs>, <use>, and inline styles:

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>
    );
}

Working codepen demo

For more details on specific support, check the docs’ list of supported SVG attributes. And here’s the (now closed) GitHub issue that tracked support for namespaced SVG attributes.

---

Previous answer

You can do a simple SVG embed without having to use dangerouslySetInnerHTML by just stripping the namespace attributes. For example, this works:

        render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

At which point you can think about adding props like fill, or whatever else might be useful to configure.

这篇关于将 SVG 嵌入到 ReactJS 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！