Подтвердить что ты не робот

Внедрение 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 - это слишком много для того, что я пытаюсь сделать.

Ответ 1

Обновление 2016-05-27

Как и в случае React v15, поддержка SVG в React (близкая к?) 100% -ная четность с текущей поддержкой браузера для SVG (source), Вам просто нужно применить некоторые синтаксические преобразования, чтобы сделать его совместимым с JSX, как вы уже должны делать для HTML (class → className, style="color: purple" → style={{color: 'purple'}}). Для любого атрибута, разделенного именами (двоеточие), например. 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>
    );
}

Рабочая демо-версия codepen

Подробнее о конкретной поддержке см. в списке поддерживаемых атрибутов SVG . И heres (теперь закрыт) проблема GitHub, которая отслеживала поддержку атрибутов SVG с именами.

Предыдущий ответ

Вы можете сделать простой встраивание SVG без использования dangerouslySetInnerHTML, просто разделив атрибуты пространства имен. Например, это работает:

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

В этот момент вы можете подумать о добавлении реквизита, например fill, или что еще может быть полезно для настройки.

Ответ 2

Если у вас есть только статическая строка svg, которую вы хотите включить, вы можете использовать dangerouslySetInnerHTML:

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

и React будет включать разметку непосредственно без ее обработки.

Ответ 3

По словам разработчика-разработчика, вам не нужно пространство имен xmlns. Если вам нужен атрибут xlink:href, вы можете использовать xlinkHref из реакции 0.14

Пример

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

Ответ 4

Если вы хотите загрузить его из файла, вы можете попробовать использовать React-inlinesvg - это довольно просто и понятно.

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here 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>

Ответ 5

попробуйте эту удивительную веб-страницу https://svg2jsx.herokuapp.com/, которая за несколько миллисекунд изменит код svg на jsx