Is it possible to use webkit css masks with SVG without an external file?

Question

Webkit allows the use of an external SVG file as a mask for any HTML element. Ie:

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

Resulting in:

(More information here: http://webkit.org/blog/181/css-masks/)

Does anyone know if there's a way to do it without an external SVG file? More specifically, can it be done with SVG generated from javascript?

Answer 1

Well, two years have passed since I asked this question and the browser landscape changed a lot. Here's an example of exactly what I wanted to do, which works only in Firefox for now: http://mozilla.seanmartell.com/persona/

As you can see there's a div with id chameleon which has the following style:

<div id="chameleon" style="clip-path:url(#clip1); -webkit-mask-box-image: url(mask.png);">

#clip1 points to a clipPath element inside an inline SVG element which links to a shape.

<clipPath id="clip1"><use xlink:href="#shape1"/></clipPath>

So now it's doable in Firefox.

Thanks @mart3ll for the practical example!