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

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

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

导致：

（更多信息请参见此处：）

---

有人知道有没有一种不用外部SVG文件的方法？更具体地说，可以用javascript生成的SVG来实现吗？

我不确定WebKit特定的扩展，但Mozilla允许您在HTML元素上应用SVG效果，如掩码和过滤器。这些可以在外部文件中定义，也可以直接在标记中定义。看见目前还没有任何规范，但是SVG和CSS工作组正在合作规范这种方法。请参阅（尽管此处仅明确提及过滤器，而未提及遮罩）

---

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

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

---

另外，请看

好吧，我问这个问题已经两年了，浏览器环境发生了很大变化。下面是我想做的一个例子，目前只在Firefox中起作用：

如您所见，有一个id为

chameleon

的div具有以下样式：

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

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

---

谢谢你的实际例子

这很可能是通过使用数据URI实现的。如果你链接到一个现场演示，我很乐意测试它。另外，当您说“SVG由JavaScript生成”时，您是指在浏览器中还是在浏览器外？在浏览器中。例如，使用Raphael库或普通文档.createElementNS（）。我不确定数据URI是否有效，但我会尝试一下。谢谢这当然很有趣，但我想问题是，是否可以在HTML中使用SVG，而不是独立的SVG。它也可以在Chrome和Safari中使用。不幸的是，IE11是个禁忌。

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