SVG를 ReactJS에 포함

SVG를 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 와 같은 것을 사용하는 것은 내가하려고하는 일에 너무 과도합니다.

---

2016-05-27 업데이트

React v15부터 SVG의 React에서 SVG에 대한 지원은 SVG에 대한 현재 브라우저 지원과 거의 100 % 패리티입니다 ( source ). 이미 HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}})에 필요한 것처럼 JSX와 호환되도록 구문 변환을 적용하면됩니다 . 예를 들어 네임 스페이스가있는 (콜론으로 구분 된) 속성의 경우 속성을 xlink:href제거 :하고 속성의 두 번째 부분 ( 예 :)을 대문자로 만드십시오 xlinkHref. 여기에 SVG의 예 <defs>, <use>그리고 인라인 스타일은 :

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

작업 코드 펜 데모

특정 지원에 대한 자세한 내용은 문서 의 지원되는 SVG 속성 목록을 확인하십시오 . 그리고 여기 네임 스페이스가있는 SVG 속성에 대한 지원을 추적 한 (현재 폐쇄 된) GitHub 문제 가 있습니다.

---

이전 답변

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.

---

If you just have a static svg string you want to include, you can use dangerouslySetInnerHTML:

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

and React will include the markup directly without processing it at all.

---

According to a react developer, you dont need the namespace xmlns. If you need the attribute xlink:href you can use xlinkHref from react 0.14

Example

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

---

If you want to load it from a file, you may try to use React-inlinesvg - that's pretty simple and straight-forward.

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>

참고URL : https://stackoverflow.com/questions/23402542/embedding-svg-into-reactjs