Question

一直坚持这个问题..

我试图在HTML元素上应用SVG蒙版，我需要它作为圆圈的笔划（而不是填充），以便将其用于某些进度圈。

简化版：

＆＃13;

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

＆＃13;

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

＆＃13;

任何已知的原因导致这种情况在Firefox上运行，并在Chrome中被完全忽略？尝试了各种不同的声明，浏览器前缀等......我在这里错过了一些明显的东西吗？

Answer 1

这不方便，但是SVG可以转换为数据URI，然后直接用作mask-image，而不是使用内联SVG并引用它的一部分：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Firefox对其接受的引用类型和数据URI格式很挑剔，但此表单适用于当前的Chrome和Firefox。

Answer 2

不幸的是，Chrome对面具的支持仍然有限，＆＃39; Can i use＆＃39;声称部分支持，
＆＃39; Css tricks＆＃39;总结了一些支持的功能。

不支持内联svgs，
然而，并非所有的希望都消失了，有些css意大利面可以让你有所作为;

使用像url(data:image/svg+xml,<urlencodedsvgHere>)这样的数据uri将掩码设置为svg。
同时将其添加到-webkit-mask供应商前缀

＆＃13;

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');
}

＆＃13;

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

＆＃13;

根据您的使用情况，您可能希望查看其他解决方案，在不使用面具的情况下绘制一个增长的圆圈是非常可能的。

webkit上HTML元素的SVG掩码

2 个答案: