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，然后直接用作遮罩图像，而不是使用内联 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。