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

时间:2010-10-28 01:30:42

标签: javascript css webkit svg

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

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

导致:

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

有没有人知道在没有外部SVG文件的情况下是否有办法做到这一点?更具体地说,可以使用从javascript生成的SVG来完成吗?

3 个答案:

答案 0 :(得分:3)

好吧,自从我提出这个问题已经过去了两年,浏览器格局发生了很大变化。以下是我想要做的一个例子,目前仅适用于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的实际例子!

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

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

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