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

【问题标题】：Is it possible to use webkit css masks with SVG without an external file?是否可以在没有外部文件的情况下使用带有 SVG 的 webkit css 掩码？
【发布时间】：2011-05-01 15:25:17
【问题描述】：

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

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

导致：

（更多信息在这里：http://webkit.org/blog/181/css-masks/）

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

【问题讨论】：

这似乎很可能可以使用数据 URI 来完成。如果您链接到现场演示，我很乐意对其进行测试。另外，当您说“由 JavaScript 生成 SVG”时，您是指在浏览器内还是在浏览器外？
浏览器内。例如使用 Raphael 库或普通 document.createElementNS()。我不确定数据 URI 是否有效，但我会试一试。谢谢！

标签： javascript css webkit svg

【解决方案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 提供的实际示例！

【讨论】：

它也适用于 Chrome 和 Safari。不幸的是 IE11 是不行的。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

也可以查看http://raphaeljs.com/

【讨论】：

这当然很有趣，但我认为问题在于是否可以在 HTML 中使用 SVG，而不是独立的 SVG。