充满图像的SVG路径未显示在html页面上

Question

我已使用以下小技巧成功将SVG路径填充了图像：

用背景图像填充SVG路径元素

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

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

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

有人知道这里可能会发生什么吗？ 谢谢。

Answer 1

加载到<img>或作为background-image SVG文件必须完全独立。 它们不能引用外部文件（如您正在加载到模式中的图像中一样）。

要解决此问题，您可以做的就是将您的图案图片作为数据URI嵌入”。

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