Memasukkan SVG ke dalam ReactJS

Apakah mungkin untuk menanamkan markup SVG ke komponen ReactJS?

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

Menghasilkan kesalahan:

Atribut Namespace tidak didukung. ReactJSX bukan XML.

Apa cara teringan untuk melakukan ini. Menggunakan sesuatu seperti React ART adalah cara yang terlalu berlebihan untuk apa yang saya coba lakukan.

Perbarui 2016-05-27

Pada React v15, dukungan untuk SVG di React adalah (mendekati?) 100% paritas dengan dukungan browser saat ini untuk SVG ( sumber ). Anda hanya perlu menerapkan beberapa transformasi sintaksis agar JSX kompatibel, seperti yang harus Anda lakukan untuk HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}). Untuk atribut namespaced (dipisahkan usus besar), misalnya xlink:href, hapus :dan kapitalisasi bagian kedua dari atribut, misalnya xlinkHref. Berikut ini adalah contoh dari svg dengan <defs>, <use>, dan gaya inline:

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

Demo codepen bekerja

Untuk detail lebih lanjut tentang dukungan spesifik, periksa daftar dokumen tentang atribut SVG yang didukung . Dan inilah masalah GitHub (sekarang ditutup) yang melacak dukungan untuk atribut SVG namespaced.

Jawaban sebelumnya

Anda dapat melakukan embed SVG sederhana tanpa harus menggunakan dangerouslySetInnerHTMLhanya dengan menghapus atribut namespace. Misalnya, ini berfungsi:

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

Pada titik mana Anda dapat berpikir tentang menambahkan alat peraga seperti fill, atau apa pun yang mungkin berguna untuk dikonfigurasi.

Jika Anda hanya memiliki string svg statis yang ingin Anda sertakan, Anda dapat menggunakan dangerouslySetInnerHTML:

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

dan Bereaksi akan menyertakan markup secara langsung tanpa memproses sama sekali.

Menurut pengembang reaksi , Anda tidak perlu namespace xmlns. Jika Anda memerlukan atribut, xlink:hrefAnda dapat menggunakan xlinkHref dari reaksi 0.14

Contoh

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

Jika Anda ingin memuatnya dari file, Anda dapat mencoba menggunakan React-inlinesvg - itu cukup sederhana dan mudah.

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>