带有遮罩的 SVG 作为 HTML 元素的背景图像

Question

我想使用 SVG 作为 HTML 元素的 background-image。但是，当我在 SVG 中的任何位置使用遮罩时，这会失败。在下面的代码中删除 mask="url(#m)" 后，SVG 将毫无问题地显示为背景图像。

HTML:

<div>Some element.</div>

JavaScript:

// The following SVG is correctly rendered as a standalone SVG file, but not in `background-image`.
const svg = `<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="m" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
  </mask>
  <rect mask="url(#m)" width="100" height="100" fill="red" />
</svg>`;

document.querySelector("div").style.backgroundImage = `url(data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;

(JSFiddle link)

结果：

预期结果：

是否可以像这样在 background-image 中使用 SVG 蒙版？如果不是，是什么原因？

相关地，如果我将 style="transform: translate(0)" 添加到 svg（尽管其他样式，如 style="background-color: blue" 可以正常工作），背景图像也无法显示。是否可以在 SVG background-image 中使用 transform？

Answer 1

您的数据语法错误URL

document.querySelector("div").style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(svg)}')`;

就是你想要的

const svg = `<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="m" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
  </mask>
  <rect mask="url(#m)" width="100" height="100" fill="red" />
</svg>`;

document.querySelector("div").style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(svg)}')`;

<div>Some element.</div>

带有遮罩的 SVG 作为 HTML 元素的背景图像

SVG with mask as background-image of HTML element

css

svg

mask

background-image

css-transforms