La incrustación de SVG en ReactJS

Es posible incrustar SVG marcado en un ReactJS componente?

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

Resultados en el error:

Atributos de espacio de nombres no son compatibles. ReactJSX no es XML.

¿Cuál es el más ligero manera de hacer esto. El uso de algo como Reaccionar de ARTE es excesivo para lo que yo estoy tratando de hacer.

  • Puede crear un jsbin? Podría ser tan simple como cambiar su apertura SVG etiqueta sólo <svg id="Layer_1"> (o mejor aún, sin el número de identificación). Edit: he aquí un ejemplo: jsbin.com/nifemuwi/2/edit?js salida
  • Gracias! Era así de simple en este caso. Mirar a Ben de la respuesta, aunque. Es bueno saber que usted puede conseguir alrededor de la jsx análisis cuando usted lo necesite.
InformationsquelleAutor nicholas | 2014-05-01

4 Kommentare

  1. 158

    Actualización 2016-05-27

    Como de Reaccionar v15, soporte para SVG en Reaccionar (cerca?) El 100% de la paridad con el navegador soporte para SVG (fuente). Usted sólo tiene que solicitar algunos sintaxis de transformaciones para hacer compatible JSX, como ya han de hacer para HTML (classclassName, style="color: purple"style={{color: 'purple'}}). Para cualquier nombres de espacios (separados por dos puntos) atributo, por ejemplo,xlink:href, quitar el : y capitalizar la segunda parte de el atributo, por ejemplo,xlinkHref. He aquí un ejemplo de un svg con <defs>, <use>, y estilos en línea:

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

    Trabajo codepen demo

    Para más detalles sobre soporte específico, consulte la documentación’ lista de admitidos SVG atributos. Y aquí está el (ahora cerrado) GitHub problema que hicieron un seguimiento de apoyo para nombres de espacios de SVG atributos.


    Respuesta anterior

    Usted puede hacer una simple SVG incrustar sin tener que utilizar dangerouslySetInnerHTML por sólo la eliminación de los atributos de espacio de nombres. Por ejemplo, esto funciona:

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

    Momento en el cual usted puede pensar acerca de cómo agregar accesorios como fill, o cualquier otra cosa que podría ser útil para configurar.

    • Hace este trabajo en ReactNative?
    • Gran pregunta! No sé, nunca he utilizado el React Nativo. Hizo darle una oportunidad?
    • Varios nombres de Clase Css con la garrapata char no funciona: ‘.class1, .class2{fill: #005baa;} ‘ ¿Cómo puedo arreglar eso?
    • Me puedes dar un ejemplo de que no funciona? Acabo de bifurcada mi demo original para agregar classB y funcionó: codepen.io/acusti/pen/BVJzNg
  2. 54

    Si usted acaba de tener una estática svg cadena de texto que se desea incluir, puede utilizar dangerouslySetInnerHTML:

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

    y Reaccionar incluirá el marcado directamente sin procesar del todo.

    • Estoy controlando algunos de los caminos en el interior de SVG utilizando Reaccionar, Reaccionar pero no parece apoyo de los elementos de filtro. Es allí una manera de apoyar a este? Parece dangerouslySetInnerHTML no funciona porque no puedo poner un span dentro de un SVG y yo no puedo usar eso para establecer el atributo de filtro en los caminos. No creo que hay una manera de crear Reaccionar elementos como de costumbre, pero ellos pasar todos los atributos pie de la letra a los elementos del DOM?
    • Como 2019, parece que puede utilizar dangerouslySetInnerHTML pero todavía no pude hacer el filtro de sombra para trabajar en Chrome usando dangerouslySetInnerHTML, pero funciona en Firefox.
  3. 26

    De acuerdo a reaccionar desarrollador, usted no necesita el espacio de nombres de atributo xmlns. Si usted necesita el atributo xlink:href puede utilizar xlinkHref de reaccionar 0.14

    Ejemplo

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

    Si quieres cargar desde un archivo, usted puede tratar de usar Reaccionar-inlinesvg – eso es bastante simple y directo.

    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>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea