javascript - 是否可以在没有外部文件的情况下将 webkit css 掩码与 SVG 一起使用？

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 为 chameleon 的 div，它具有以下样式:

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

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

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

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

谢谢 @mart3ll为了实际的例子!