如何从可在 Chrome 中使用的内联 SVG 应用蒙版？答案

【问题标题】：How can I apply a mask from an inline SVG that will work in Chrome?如何从可在 Chrome 中使用的内联 SVG 应用蒙版？
【发布时间】：2017-07-18 22:17:37
【问题描述】：

我想使用在同一个 HTML 文件（内联 SVG）中定义的 SVG 形状来剪辑我的元素。

它适用于clip-path:

div {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: url("#c");
}

<div>
  <svg>
    <defs>
      <clippath id="c">
        <circle cx="100" cy="100" r="50" />
      </clippath>
    </defs>
  </svg>
</div>

但是当使用掩码时，虽然这在 Firefox 中可以正常工作，但它在 Chrome 中不应用掩码：

div {
  width: 200px;
  height: 200px;
  background-color: red;
  mask: url("#m");
}

<div>
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

四处搜索 (example)，Chrome 似乎不希望掩码指的是定义，而是指整个图像。但是，如果已内联，有没有办法引用整个图像？或者，我还能做些什么来应用内联元素的掩码？

【问题讨论】：

@Kaiido 这不是重复的，因为我的问题是关于内联 SVG；另一个问题明确与外部文件有关，而这种区别是问题的重点。
是的，很抱歉刚刚尝试了一下，发现它不适用于内联的...您希望非 js 解决方案吗？
@Kaiido 我对任何事情都持开放态度，但非 js 可能更可取。

标签： html css svg

【解决方案1】：

这是一个丑陋的js解决方案，它将

获取你<mask>的内容，
复制到一个新的svg元素中_{（幸运的是chrome不需要宽高）},
将其转换为 data-URI 并设置为 webkit-image CSS 规则，以免污染其他浏览器。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var mask = document.querySelector('mask');
svg.innerHTML = mask.innerHTML;
var str = new XMLSerializer().serializeToString(svg);
str = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(str);
var div = document.getElementById('mask-me');
div.style.webkitMaskImage = 'url('+str+')';

#mask-me {
  width: 200px;
  height: 200px;
  background-color: red;
  mask: url(#m);
}

<div id="mask-me">
  <svg>
    <defs>
      <mask id="m">
        <circle cx="100" cy="100" r="50" fill="white" />
      </mask>
    </defs>
  </svg>
</div>

【讨论】：

整洁！虽然您现在可以删除 #mask-me CSS 规则中的 mask: 行。
@Oak 不，FF 和其他不了解webkitMaskImage 的人仍然需要它（顺便说一句，我们可能应该事先检查一下，但我会让它作为读者练习：webkit 正在成为每个人的标准前缀）

【解决方案2】：

上次我检查 Chrome 不支持 mask 属性。 It only supports mask-image.

我想情况仍然如此。

【讨论】：

mask 是简写，mask-image 包含在mask 中，但是，chrome 似乎仍然需要-webkit- 前缀。但即便如此，引用 SVGMaskElement 也不起作用。