使用 SVG 作为背景图像时，嵌入的 <image> 不呈现

Embedded <image> not rendered when using SVG as background-image

提问人：Pekka 提问时间：10/31/2016 最后编辑：Pekka 更新时间：8/28/2022 访问量：298

问：

我有一张带有云插图的 SVG 图像。

enter image description here

云将用于几个天气图标。我还有另一个 SVG 文件，它嵌入了云插图并添加了另一个图形元素，即一个圆圈。

现在，当我直接在浏览器中打开这个主SVG文件时，它显示正常：

enter image description here

但是，当我将文件用作 时，云不会呈现：background-image

enter image description here

这是一个 JSFiddle。

这到底是怎么回事？

  • 这不应该是相对路径问题，因为当我在浏览器中调用主 SVG 时，图像显示正常（我尝试使用绝对路径无济于事）

  • 这不是裁剪问题 - 如果你在 JSFiddle 中更改属性，你会看到整个图像区域都被渲染了，只是没有云。background-size

  • 云是由Adobe Illustrator生成的，尚未优化，但看起来还不错。

这是主要的 SVG 标记：

<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle cx="0" cy="-0" r="30" style="fill:red" />
      <image x="12" y="12" width="20" height="40" xlink:href="elements/cloud.svg" />
    </svg>

我做错了什么？

我已经在 Safari 9.1.2 和 OS X 上的最新 Chrome 中对此进行了测试，结果相同。

HTML CSS SVG

评论

0赞 Pekka 10/31/2016
这似乎是一个 Webkit 错误，看起来我必须在这里采取不同的方式。stackoverflow.com/questions/11529857/......不过，一个明确、权威的答案将不胜感激

答：

2赞 methodofaction 10/31/2016 #1

所有作为图像插入的 SVG（通过标记或 ）都不能引用外部文件。因此，如果您有外部 CSS 样式表、自定义字体或外部图像，它将不起作用。imgbackground-image

解决方案是将图像数据嵌入到属性中：xlink:href

<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="0" cy="-0" r="30" style="fill:red" />
  <image x="12" y="12" width="20" height="40" xlink:href="data:image/svg+xml,%0A%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20284%20179%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bfill%3A%23508f9e%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%20transform%3D%22translate(-278.44%20-208.09)%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%22279.44%22%20y%3D%22207.09%22%20width%3D%22284%22%20height%3D%22179%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cg%20id%3D%22TK6tin%22%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M562.44%2C302.09c-4.19%2C9-7.71%2C18.44-13.39%2C26.63-9.1%2C13.12-21.26%2C22.65-35.52%2C30.06C497.65%2C367%2C481%2C372.3%2C463.34%2C373.68c-17%2C1.33-32.1-3.68-43.58-16.9-3-3.43-4.87-2.72-7.56-.06-6%2C5.92-11.9%2C11.83-19.1%2C16.52-9.22%2C6-19.37%2C9.45-29.58%2C13a4.17%2C4.17%2C0%2C0%2C0-1.09.89h-19c-7.91-2.63-15.56-5.83-21.8-11.53a10%2C10%2C0%2C0%2C0-6.55-2.63c-15.38-1.29-32.37-10.18-35.09-28.87-0.38-2.61.39-5.62-1.56-8v-5c2.09-3.79%2C1.2-8.2%2C2.85-12.26%2C2.87-7.07%2C8.91-9.62%2C15-11.45%2C5.41-1.62%2C9.87-3%2C11.87-9%2C3.9-11.71%2C12.39-17.5%2C24.66-17.08%2C5.43%2C0.18%2C7.92-1.18%2C10.39-6.77%2C4.51-10.24%2C12-18.52%2C21.06-25.77A171.48%2C171.48%2C0%2C0%2C1%2C398.75%2C227c20.39-9.63%2C41.2-17.45%2C64.13-17.83%2C1%2C0%2C2%2C.11%2C2.55-1.06h7c2.35%2C2.26%2C5.3.64%2C7.93%2C1.21%2C13%2C2.81%2C25.88%2C6.08%2C37.28%2C13.42%2C8.3%2C5.35%2C17.12%2C10.07%2C23.36%2C18a94%2C94%2C0%2C0%2C1%2C10.57%2C17.12c4.56%2C9.4%2C9.31%2C18.73%2C10.86%2C29.24v15ZM318.12%2C365.24c1.49%2C0.13%2C1.71%2C1.24%2C2.29%2C2a37.42%2C37.42%2C0%2C0%2C0%2C25.1%2C14.71c15%2C2%2C28.63-2.48%2C41.61-9.82C397.41%2C366.3%2C405%2C357.4%2C413.92%2C350c2.08-1.74%2C3.65-2.89%2C5.66-.08%2C12.35%2C17.29%2C30.17%2C21.51%2C49.68%2C19a127.56%2C127.56%2C0%2C0%2C0%2C54.87-21c16.7-11.17%2C26.73-27.07%2C33.68-45.37%2C0.68-1.8.5-3.59%2C0.63-5.41%2C1.16-16.58-6.55-30.39-13.88-44.3a39.91%2C39.91%2C0%2C0%2C0-7.73-10.86c-13.58-12.69-28.91-22-47.27-26.37-15.43-3.68-30.69-3.42-46.1-.72-15.69%2C2.75-30.25%2C8.85-44.45%2C15.69-23.79%2C11.46-45.28%2C25.58-54.66%2C52.22a3.16%2C3.16%2C0%2C0%2C1-3.27%2C2.38c-3.81.17-7.6%2C0.73-11.42%2C1-9.24.54-15.85%2C4.7-17.71%2C13.68-1.27%2C6.13-4.13%2C9-9.56%2C10.64-1.3.39-2.6%2C0.42-3.85%2C0.75-5.69%2C1.52-11.51%2C3.66-13.65%2C9.54-4.64%2C12.77-2.74%2C26.7%2C6.27%2C37.43%2C6%2C7.19%2C14.75%2C9.64%2C23.74%2C10.93%2C0.84%2C0.12%2C1.74%2C1.26%2C2.8.06C317.92%2C368%2C316.87%2C366.61%2C318.12%2C365.24Z%22%20transform%3D%22translate(-278.44%20-208.09)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
</svg>

评论

0赞 Pekka 10/31/2016
啊 - 但我想从安全角度来看这是有道理的。看起来别无他法，只能将主 SVG 拉入文档。谢谢！顺便说一句，在某处是否有关于这种行为的官方参考？
0赞 felix91 10/31/2016 #2

请按照此链接中的说明进行操作：https://css-tricks.com/using-svg/

您需要输入完整的 svg 代码。您可以从 Photoshop 或在线工具中获取它，如下所示：

.background-img {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15'  cy='15' r='10' /></svg>")  no-repeat;
    height: 30px;
    width: 30px;
    }

上一个：按前缀过滤数组的本机函数

下一个：在 JavaScript 中获取计算的字体系列