填充图像的 SVG 路径未显示在 html 页面上答案

【问题标题】：SVG path filled with image doesn't show up on html page填充图像的 SVG 路径未显示在 html 页面上
【发布时间】：2015-08-17 13:05:39
【问题描述】：

我已经使用这个小技巧成功地用图像填充了我的 SVG 路径：

但是，当我使用 background: url() 在我的 html 页面中加载 svg 文件时，它没有显示出来。

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

这是我的 html 页面上相同的 svg 图片：

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

【问题讨论】：

尝试对其进行编码并将代码用作背景值
你用的是什么浏览器？此外，尚不清楚 SVG 实际上应该是什么样子。它应该看起来像您摆出的第二张图片还是第一张图片？它似乎也是一种纯色，所以为什么你不只是用那种颜色填充是令人困惑的。您也可以发布 SVG 的 XML 吗？
cameronjonesweb，您能详细说明一下吗？
prodigitalson，我填充路径的图像没有显示在浏览器中（第二张图片），但显示在 svg 文件本身（第一张图片）
cameronjonesweb，我试过这个b64.io，但我的文件太大了

标签： html css svg

【解决方案1】：

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

您可以做的就是将您的图案图像嵌入为“数据 URI”。

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

【讨论】：