리액트에 SVG 삽입JS

리액트에 SVG 삽입JS

리액트에 SVG 마크업을 삽입할 수 있습니까?JS 컴포넌트?

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

에러가 발생합니다.

네임스페이스 특성은 지원되지 않습니다.ReactJSX는 XML이 아닙니다.

가장 가벼운 방법은 무엇입니까?리액트 아트 같은 걸 쓰는 건 내가 하려는 일치고는 너무 지나쳐.

2016-05-27 업데이트

React v15에서 Resact의 SVG 지원은 현재 SVG(소스)에 대한 브라우저 지원과 100%(거의?) 패리티입니다.HTML에서 이미 해야 하는 것처럼 JSX와 호환되도록 구문 변환을 적용하기만 하면 됩니다.class→className,style="color: purple"→style={{color: 'purple'}}namesched(콜론으로 구분된) Atribut의 경우.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 속성 목록을 참조하십시오.그리고 여기 (지금은 종료된) GitHub의 문제가 있습니다.이 문제는 이름보다 우선된 SVG 속성의 지원을 추적한 것입니다.

---

이전 답변

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

        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>"}} />;
}

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

리액트 개발자에 따르면 이름 공간 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>

svg를 Import하여 이미지처럼 사용할 수 있습니다.

import chatSVG from '../assets/images/undraw_typing_jie3.svg'

그리고 그것을 img 태그에 세웁니다.

<img src={chatSVG} className='iconChat' alt="Icon chat"/>

내가 찾은 가장 좋은 방법은 이 사이트였다.

https://react-svgr.com/playground/

svg를 복사하면 svg가 반응 코드로 변환된 반응 기능 컴포넌트가 나타납니다.

svg를 문자열로 변환하여 리액션에 구현하는 패키지가 있습니다.JS 파일

https://www.npmjs.com/package/convert-svg-react

언급URL : https://stackoverflow.com/questions/23402542/embedding-svg-into-reactjs