如何将背景图像设置为 SVG

Question

所以我尝试导入 SVG 背景图像，当我导入 PNG 或任何其他类型但没有显示为 SVG 时它可以工作如果你知道在 reactJS 上使用 fabric canvas 的更好主意，请告诉我

    const Tool = () => {
      const [canvas, setCanvas] = useState("");
      useEffect(() => {
        setCanvas(initCanvas());
      }, []);
      const initCanvas = () =>
        new fabric.Canvas("canvas", {
          height: 800,
          width: 800,
    
          backgroundImage: "/images/__Body1.svg", // here is the imported image
        });
    
    
      return (
        <div className="test">
          
    
          <React.Fragment>
            <CssBaseline />
            <Container maxWidth="md">
    
              <canvas id="canvas" />
    
            </Container>
          </React.Fragment>
        </div>
      );
    };
    
    export default Tool;

Answer 1

您应该可以使用 backgroundImage: url(/images/__Body1.svg)。

只需确保 svg 文件包含在生成的文件夹结构中。

如果您的输出包中没有 /images/__Body1.svg 文件并且您希望打包程序处理它，您可能需要进行一些更改。就（大概）webpack 而言，/images/__Body1.svg 只是一个字符串，因此它不会将其作为捆绑的一部分进行复制。如果是这种情况（svg 未添加到结果包中），您可以查看 webpack docs 关于更新 webpack.config.js 文件。请注意，您可能还需要手动包含 svg 文件，即。

import bodySvg from ('/images/__Body1.svg');
//...
  new fabric.Canvas("canvas", {
    height: 800,
    width: 800,
    backgroundImage: bodySvg, // here is the imported image
  });
//...

another resource

如何将背景图像设置为 SVG

how can i set the background image as SVG

reactjs

canvas

fabricjs