Webkit 允许使用外部 SVG 文件作为任何 HTML 元素的掩码。即:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
导致:
(更多信息在这里:http://webkit.org/blog/181/css-masks/)
有谁知道没有外部 SVG 文件是否有办法做到这一点？更具体地说，可以使用从 javascript 生成的 SVG 来完成吗？
最佳答案
嗯，自从我提出这个问题以来已经过去了两年，浏览器的格局发生了很大变化。这是我想要做的事情的示例，目前仅适用于 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为了实际的例子!
关于javascript - 是否可以在没有外部文件的情况下将 webkit css 掩码与 SVG 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4039041/