javascript - Is it possible to use webkit css masks with SVG without an external file? - Stack Overflow

admin管理员组

文章数量:1429844

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: /)

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?

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

• javascript
• css
• webkit
• svg

Share Improve this question Follow edited Feb 8, 2017 at 14:30 CommunityBot 111 silver badge asked Oct 28, 2010 at 1:30 juandopazojuandopazo 6,32922 gold badges2929 silver badges3030 bronze badges 2

• It seems quite likely that this could be done using a data URI. If you link to a live demo, I'd be happy to test it. Also, when you say "SVG generated from JavaScript" do you mean in-browser, or out of the browser? – jbeard4 Commented Oct 28, 2010 at 10:12
• In-browser. For example using the Raphael library or plain document.createElementNS(). I'm not sure data URIs will work, but I'll give it a try. Thanks! – juandopazo Commented Oct 28, 2010 at 12:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./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/brokeneye/ygsKm/

Also check out http://raphaeljs./

本文标签： javascriptIs it possible to use webkit css masks with SVG without an external fileStack Overflow