填充图像的SVG路径不会显示在html页面上

Question

我使用这个小技巧成功填充了我的SVG路径：

Fill SVG path element with a background-image

但是，当我使用background：url（）在我的html页面中加载svg文件时，它不会显示。

这是我在浏览器中打开的svg图片：

这是我的html页面上的同一个svg图像：

有谁知道这里会发生什么？谢谢。

Answer 1

加载到<img>或background-image的SVG文件必须完全自包含。它们不能引用外部文件（如您在模式中加载的图像）。

你可以做些什么来解决它是将你的模式图像嵌入数据URI＆＃34;。

<image xlink:href="data:image/jpeg;base64,..." .../>