[javascript] SVG를 ReactJS에 포함

Program / 글쓴이

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 문제 가 있습니다.

이전 답변

dangerouslySetInnerHTML네임 스페이스 속성 만 제거하면 사용하지 않고도 간단한 SVG 임베드를 수행 할 수 있습니다 . 예를 들어, 다음과 같이 작동합니다.

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

이 시점에서과 같은 소품을 추가 fill하거나 구성하는 데 유용한 다른 것을 추가 할 수 있습니다.

답변

포함하려는 정적 svg 문자열 만 있으면 다음을 사용할 수 있습니다 dangerouslySetInnerHTML.

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

React는 마크 업을 전혀 처리하지 않고 직접 포함합니다.

답변

반응 개발자에 따르면 네임 스페이스 xmlns가 필요하지 않습니다. 속성이 필요한 경우xlink:href 반응 0.14의 xlinkHref를 사용할 수 있습니다

예

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

답변

파일에서 파일을로드하려면 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>

답변