问

将SVG嵌入到ReactJS中

等待的承诺灬_231 发布于 2023-01-18 10:09

svg

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

render: function() {
  return (

导致错误:

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

这样做最轻的方法是什么.使用像React ART这样的东西对我正在尝试做的事情来说太过分了.

4 个回答

更新2016-05-27

从React v15开始,React中对SVG的支持是(接近？)100%奇偶校验,当前浏览器支持SVG(源).你只需要应用一些语法转换来使它与JSX兼容,就像你必须为HTML做的那样(class→ className,→ purple'}}).对于任何命名空间(冒号分隔)属性,例如xlink:href,删除:和大写属性的第二部分,例如xlinkHref.下面是与SVG的例子<defs>,<use>以及内嵌样式:

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 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" blue'}}/>
        </svg>
    );
}



工作codepen演示

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



以前的答案

您可以dangerouslySetInnerHTML通过仅剥离命名空间属性来执行简单的SVG嵌入,而无需使用.例如,这有效:

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


此时,您可以考虑添加道具fill,或者其他可能有用的配置.


                
                    2023-01-18 10:12  回答
                       3号仔小麦


                        
                如果你想从文件加载它,你可以尝试使用React-inlinesvg - 这非常简单和直接.

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>

        
                
                    2023-01-18 10:12  回答
                       钱靖均秀蓉怡慧
                
            
                        
                根据反应开发人员的说法,您不需要命名空间xmlns.如果您需要该属性xlink:href,可以使用xlinkHref from react 0.14

例

Icon = (props) => {
  return <svg className="icon">
    <use xlinkHref={ '#' + props.name }></use>
  </svg>;
}

        
                
                    2023-01-18 10:12  回答
                       jerry613
                
            
                        
                如果你想要包含一个静态svg字符串,你可以使用dangerouslySetInnerHTML:

render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}


和React将直接包含标记而不进行处理.

        
                
                    2023-01-18 10:12  回答
                       mobiledu2502860093



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签