CODEWITHSUNDEEP
htmlcsssvg
Facundo Corradini
Facundo Corradini

Reputation: 3933

SVG mask on HTML elements on webkit

been stuck with this issue for a while..

I'm trying to apply an SVG mask on an HTML element, I need it to be the stroke (and not the fill) of a circle, in order to use it for some progress circles.

A simplified version: 

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

Any known reasons why this works on Firefox, and gets completely ignored in Chrome? Tried with all sorts of different declarations, browser prefixes, etc... Am I missing something obvious here?

Upvotes: 0

Views: 3414

Answers (2)

Lars
Lars

Reputation: 3628

Unfortunately chrome's support for masks is still limited,
'Can i use' claims partial support,
'Css tricks' sums up some of the supported features.

Inline svgs aren't supported,
Not all hope is lost though, with some css spaghetti🍝 you can make something work;

  • use a data uri like url(data:image/svg+xml,<urlencodedsvgHere>) to set a mask as the svg.
  • Also add it on the -webkit-mask vendor prefix

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>

Depending on your use case you might want to look to other solutions, Drawing a growing circle is very possible without using a mask.

Upvotes: 2

mmlr
mmlr

Reputation: 2165

It is not as convenient, but instead of using an inline SVG and referencing parts of it, a SVG can be turned into a data URI and then used as a mask-image directly:

#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 is picky about the type of quotes it accepts and the data URI format, but this form works on current Chrome and Firefox.

Upvotes: 5

Related Questions