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 并引用它的一部分，而是可以将 SVG 转换为数据 URI，然后直接用作 mask-image：

#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。

Answer 2

不幸的是，chrome 对蒙版的支持仍然有限，
'Can i use' 声称部分支持，
'Css tricks' 总结了一些支持的功能。

不支持内联 svg，
不过，并不是所有的希望都消失了，使用一些 css spaghetti? 你可以让一些东西发挥作用；

• 使用 url(data:image/svg+xml,<urlencodedsvgHere>) 之类的数据 uri 将掩码设置为 svg。
• 还将其添加到 -webkit-mask 供应商前缀中

code {
  font-family: monospace;
}

#mask-me {
  background-color: red;
  width: 120px;
  height: 120px;
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%22142.0%22%20width%3D%22142%22%20height%3D%22142%22%20id%3D%22svg3%22%20data-ember-extension%3D%221%22%3E%0A%20%20%3Cg%20id%3D%22layer1%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2248%22%20fill%3D%22transparent%22%20stroke%3D%22black%22%20stroke-width%3D%2212%22%09stroke-dasharray%3D%22339.292%22%20stroke-dashoffset%3D%22175%22%20%3E%3C%2Fcircle%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
}
  mask: url('data:image/svg+xml,%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%22142.0%22%20width%3D%22142%22%20height%3D%22142%22%20id%3D%22svg3%22%20data-ember-extension%3D%221%22%3E%0A%20%20%3Cg%20id%3D%22layer1%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2248%22%20fill%3D%22transparent%22%20stroke%3D%22black%22%20stroke-width%3D%2212%22%09stroke-dasharray%3D%22339.292%22%20stroke-dashoffset%3D%22175%22%20%3E%3C%2Fcircle%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
}

<div>The svg used:</div>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="142.0" width="142" height="142"
  id="svg3" data-ember-extension="1">
  <g id="layer1">
      <circle cx="60" cy="60" r="48" fill="transparent" stroke="black" stroke-width="12"	stroke-dasharray="339.292" stroke-dashoffset="175" ></circle>
  </g>
</svg>

<div>The svg url encoded</div>
<code>%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%22142.0%22%20width%3D%22142%22%20height%3D%22142%22%20id%3D%22svg3%22%20data-ember-extension%3D%221%22%3E%0A%20%20%3Cg%20id%3D%22layer1%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2248%22%20fill%3D%22transparent%22%20stroke%3D%22black%22%20stroke-width%3D%2212%22%09stroke-dasharray%3D%22339.292%22%20stroke-dashoffset%3D%22175%22%20%3E%3C%2Fcircle%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E</code>

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

根据您的用例，您可能希望寻找其他解决方案， 不使用蒙版也可以画出不断增长的圆圈。