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

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

<img src="kate.png" 开发者_如何学Gostyle="-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?

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!

I'm not sure about the WebKit specific extension but Mozilla allow you to apply SVG effects like masks and filters on HTML elements. These can be defined in external files or directly in the markup. See this post. This isn't in any spec at the moment, but the SVG and CSS working groups are working together to spec this approach. See the Working Group's page (although only filters, not masks are mentioned explicitly there).

You can usually link to something in SVG by including the id of the element in the url value (e.g. url(#someID)). You could try generating the SVG via JS, giving it an id and inject it into the document and see if it works. There is no spec as it is a WebKit extension so it is hard to say without trying it out.

Yes I believe it's possible. Recently I used PHP to generate the SVG file. Here is an example that I made:

http://jsfiddle.net/brokeneye/ygsKm/

Also check out http://raphaeljs.com/