html - 我无法在 React 中将 SVG 设置为背景图片

Question

我正在尝试将 svg 设置为我的 Container div 的背景图像。但是出了点问题。我的 SVG 箭头函数:-

const CurveOne = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path
        fill="#EEEEEE"
        fill-opacity="1"
        d="M0,192L48,165.3C96,139,192,85,288,69.3C384,53,480,75,576,90.7C672,107,768,117,864,128C960,139,1056,149,1152,128C1248,107,1344,53,1392,26.7L1440,0L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
      ></path>
    </svg>
  );
};

export default CurveOne;

我的容器样式的 div 组件:-

const Container = styled.div`
background-image: url(${CurveOne});
`;

Answer 1

在 background-image: url(...) 中，url 应该是一个字符串，但是您传递了一个函数 CurveOne，它将被强制转换为一个字符串并导致无效的样式。

相反，您可以为字符串使用数据 uri。在线提供一种转换工具:https://heyallan.github.io/svg-to-data-uri/

或者，如果你想使用这个函数，你可以引用https://heyallan.github.io/svg-to-data-uri/js/svg-to-data-uri.js中的svgToDataURI函数。(我不确定我是否可以在我的答案中复制该功能)然后可以像下面这样使用它:

let svgString = 
`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path
        fill="#EEEEEE"
        fill-opacity="1"
        d="M0,192L48,165.3C96,139,192,85,288,69.3C384,53,480,75,576,90.7C672,107,768,117,864,128C960,139,1056,149,1152,128C1248,107,1344,53,1392,26.7L1440,0L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
      ></path>
    </svg>
`

let dataURI = svgToDataURI(svgString);

const Container = styled.div`
background-image: url(${dataURI})
`;