html - webkit 上 HTML 元素的 SVG 掩码

Question

被这个问题困扰了一段时间..

我正在尝试在 HTML 元素上应用 SVG 掩码，我需要它是圆的笔划(而不是填充)，以便将它用于某些进度圆。

简化版:

#mask-me{
  width: 120px;
  height: 120px;
  mask: url('#mask');
  mask-mode:alpha;
  background:red;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0">
  <defs>
    <mask id="mask">
      <circle cx="60" cy="60" r="48" fill="transparent" stroke="#FFFFFF" stroke-width="12"	stroke-dasharray="339.292" stroke-dashoffset="175" ></circle>
    </mask>
  </defs>
</svg>

<div id="mask-me"></div>

这在 Firefox 上有效，而在 Chrome 中被完全忽略的任何已知原因？尝试了各种不同的声明、浏览器前缀等...我是否遗漏了一些明显的东西？

Answer 1

虽然不是很方便，但是可以将 SVG 转换为数据 URI，然后将其用作 mask-image，而不是使用内联 SVG 并引用其中的一部分。直接:

#mask-me {
  width: 120px;
  height: 120px;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' height='120' width='120'><circle cx='60' cy='60' r='48' fill='none' stroke='black' stroke-width='12' stroke-dasharray='339.292' stroke-dashoffset='175'></circle></svg>");
  background:red;
}

<div id="mask-me"></div>

Firefox 对其接受的引号类型和数据 URI 格式很挑剔，但这种形式适用于当前的 Chrome 和 Firefox。