主页 / 问题 / 1245922
Accepted
Monkey Mutant
Asked:2022-02-19 06:57:23 +0000 UTC2022-02-19 06:57:23 +0000 UTC

为什么包含 xlink:href 的 SVG 不渲染为背景？

  • 772

我按要求绘制了一个 svg，内联如何运作良好，但如果将其作为背景包含在 css 中，则不会显示...。

改了很多次。。

<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="#000" />
      <path d="M0,0 300,0  C300,0 600,300 900,0 L1200,0 1200,600 C1200,600 600,500 0,600z" fill="#fff" />
    </mask>
  </defs>
  <image xlink:href="https://i.ytimg.com/vi/vqvUC-1pNvo/maxresdefault.jpg" width="1200px" height="600px" x="0" y="0" preserveAspectRatio="none" mask="url(#mask)" />
</svg>

为什么文档不能在 css 中作为背景工作？需要做什么才能使其发挥作用？

css

1 个回答

  1. Best Answer

    SVG 集成规范（虽然是一个草案，但似乎很久以前就在浏览器中实现了）指出，当在 HTML 标记<img>或 CSS 属性（包括background）中使用 SVG 文件时，该 SVG 文件被解释为“动画图像document”，对于这种类型的集成，应该使用“安全动画处理模式”，它不仅禁止执行脚本，还禁止链接到任何外部资源。因此，这不是命运。

    如果您拒绝链接并使用 Data URI ( ) 将图像直接嵌入到 SVG 中data:image/jpeg;base64,/9j/4AAQSk...，那么它将被显示。（然而，这是一个可疑的决定......）

    • 4

相关问题