Rendu du composant SVG de React en tant que backgroundImage

Question

J'essaie d'effectuer le rendu d'un composant React qui renvoie un message de type <svg> en tant que backgroundImage d'un <div> . Actuellement, j'utilise ReactDOMServer con renderToStaticMarkup o renderToString mais rien ne s'affiche :

const SvgComponent = () => {
    return (
        <svg xmlns='http://www.w3.org/2000/svg'><rect fill='red' x='0' y='0' /></svg>
    )
}

const ParentComponent = () => {
    return (
        <div
            className={classes.banner}
            style={{
                backgroundImage: `url("data:image/svg+xml;utf8, ${ReactDOMServer.renderToStaticMarkup(<SvgComponent />)} ")`
            }}
        >
        </div>
    )
}

Est-ce que le paquet jsx-to-string la manière de le faire ?

Answer 1

Vous devez utiliser encodeURIComponent() pour encoder URI les données SVG car React ne rendra pas les données SVG si elles ne sont pas encodées URI. Donc,

const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));

Définissez également la largeur et la hauteur dans <rect> de SVG comme,

<rect fill="red" width={100} height={100} />

Le code final devrait donc ressembler à ceci,

import ReactDOM from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import React from "react";

const SvgComponent = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg">
      <rect fill="red" width={100} height={100} />
    </svg>
  );
};

const ParentComponent = () => {
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));
  return (
      <div
          style={{
              backgroundImage: `url('data:image/svg+xml;utf8, ${svgString}')`,
             width:500,
             height:500
            }}
      >
      </div>
  )
}

ReactDOM.render(<ParentComponent />, document.getElementById("root"));

J'ai configuré la même chose dans CodeSandbox,

Answer 2

ReactDOMServer.renderToStaticMarkup utilise des guillemets dans le balisage, il renvoie donc

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="red" width="10" height="10"></rect></svg> 

Et parce que vous avez également utilisé des guillemets dans url("...") cela donne un balisage invalide.

Il suffit donc d'utiliser des guillemets simples dans url('...') et cela devrait fonctionner.

Note : Cela va probablement se briser si react change la façon dont renderToStaticMarkup est mis en œuvre !