Etiqueta de uso SVG y ReactJS

Solución:

MDN dice que xlink:href está en desuso a favor de href. Debería poder utilizar el href atributo directamente. El siguiente ejemplo incluye ambas versiones.

A partir de Reaccionar 0.14, xlink:href está disponible a través de React como propiedad xlinkHref. Se menciona como una de las “mejoras notables” en las notas de la versión de 0.14.

<!-- REACT JSX: -->
<svg>
  <use xlinkHref="https://foroayuda.es/svg/svg-sprite#my-icon" />
</svg>

<!-- RENDERS AS: -->
<svg>
  <use xlink:href="https://foroayuda.es/svg/svg-sprite#my-icon"></use>
</svg>

Actualización 2018-06-09: Información agregada sobre href vs xlink:href atributos y ejemplo actualizado para incluir ambos. Gracias @devuxer

Actualización 3: En el momento de escribir este artículo, las propiedades de React master SVG se pueden encontrar aquí.

Actualización 2: Parece que todos Los atributos svg ahora deberían estar disponibles a través de react (ver PR del atributo svg fusionado).

Actualización 1: Es posible que desee estar atento al problema relacionado con svg en GitHub para obtener más compatibilidad con SVG. Hay novedades en proceso.

Manifestación:

const svgReactElement = (
  <svg
    viewBox="0 0 1340 667"
    width="100"
    height="100"
  >
    <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
    { /* Deprecated xlink:href usage */ }
    <image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
  </svg>
);

var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);

ReactDOM.render(svgReactElement, document.getElementById('render-result') );

function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>

<h2>Render result of rendering:</h2>
<pre>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
&lt;/svg&gt;</pre>

<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>

Actualización septiembre 2018: esta solución está en desuso, lea la respuesta de Jon en su lugar.

–

React no admite todas las etiquetas SVG como usted dice, aquí hay una lista de etiquetas compatibles. Están trabajando en un soporte más amplio, p. Ej. En este ticket.

Una solución alternativa común es inyectar HTML en lugar de etiquetas no compatibles, f.ex:

render: function() {
    var useTag = '<use xlink:href="https://foroayuda.es/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

Si te encuentras xlink:href, luego puede obtener el equivalente en ReactJS eliminando los dos puntos y colocando en camello el texto agregado: xlinkHref.

Probablemente eventualmente usará otras etiquetas de espacio de nombres en SVG, como xml:space, etc. La misma regla se aplica a ellos (es decir, xml:space se convierte en xmlSpace).

---

---

Utiliza Nuestro Buscador