是否可以在没有外部文件的情况下使用带有SVG的webkit css掩码？

Question

Webkit允许使用外部SVG文件作为任何HTML元素的掩码.即:

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

导致:

(更多信息请访问:http://webkit.org/blog/181/css-masks/)

有没有人知道如果没有外部SVG文件,有没有办法做到这一点？更具体地说,它可以用javascript生成的SVG来完成吗？

Answer 1

好吧，自从我提出这个问题以来已经过去了两年，浏览器格局发生了很大变化。这是我想要做的事情的一个例子，目前仅适用于 Firefox： http: //mozilla.seanmartell.com/persona/

正如你所看到的，有一个带有 id 的 div chameleon，其样式如下：

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

#clip1指向clipPath链接到形状的内联 SVG 元素内的元素。

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

所以现在它在 Firefox 中是可行的。

感谢@mart3ll提供的实际示例！