是否可以在没有外部文件的情况下使用带有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为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的实际例子！

Answer 2

我不确定WebKit特定扩展，但Mozilla允许您对HTML元素应用SVG效果，如掩码和过滤器。这些可以在外部文件中定义，也可以直接在标记中定义。见this post。目前这不是任何规范，但SVG和CSS工作组正在合作规范这种方法。请参阅Working Group's page（尽管只有过滤器，而不是在那里明确提到过掩码）。

您通常可以通过在url值中包含元素的id（例如url（#someID））来链接到SVG中的某些内容。你可以尝试通过JS生成SVG，给它一个id并将其注入文档并查看它是否有效。没有规范，因为它是一个WebKit扩展，所以很难说没有尝试它。

Answer 3

是的，我相信这是可能的。最近我使用PHP生成SVG文件。 这是我做的一个例子：

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

另请查看http://raphaeljs.com/