代码之家 › 专栏 › 技术社区 › varkor

用掩码作为HTML元素背景图像的SVG

css-transforms mask background-image svg css

varkor · 技术社区 · 4 年前

我想使用SVG作为 background-image HTML元素的。但是,当我在SVG中的任何地方使用掩码时,这将失败。什么时候? mask="url(#m)"

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 )

预期结果:

是否可以在 背景图像 这样地?如果没有,原因是什么?

相应地,如果我添加,背景图像也无法显示 style="transform: translate(0)" 致 svg (虽然其他风格,比如 style="background-color: blue" transform 在SVG中 背景图像 ?

1 回复 | 直到 4 年前

Robert Longson 4 年前

数据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>

推荐文章

Jam3sn · 变量旋转文本的绝对位置

6 年前

John Balvin Arias · 当css transform:scale()处于活动状态时,单击边框按钮会触发单击

6 年前

Joshua Leung · 如何旋转文本并固定到右下角?

6 年前

marius · jQuery UI可选css转换问题

7 年前

jean-max · 矩形中的菱形HTML和CSS3

7 年前

Eugenio · 无极旋转DIV,但具有绝对定位

7 年前

Boucherie · CSS/SCSS rails转换div,但不是嵌套图像(rails)

7 年前

akhil regonda · 如何使用transform scale删除屏幕上显示的滚动条?

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Scoob · 在flexbox中不工作的锚点元素上变换比例

7 年前