我正在尝试将 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});
`;
最佳答案
在 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})
`;
关于html - 我无法在 React 中将 SVG 设置为背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73220489/