带SVG的Webkit掩码

Question

我正在开发的网页存在一些问题。

我使用.SVG文件来屏蔽图像的一部分。

它适用于Firefox，Safari，但仅适用于OS X下的Chrome。

我想明白为什么？有什么想法吗？

以下是我遇到同样问题的示例页面：http://girliemac.com/sandbox/mask.html

提前致谢，

JK _

Answer 1

尝试尝试不同的值，如下所示：

-webkit-mask-box-image: url(svg/twitter-bird-new.svg) 100 100 0 0 round round;  

似乎它与缩放有关。为什么？因为它还处于试验阶段。

来源：https://developer.mozilla.org/en/CSS/-webkit-mask-box-image

Answer 2

这看起来不错，但如果您在Chrome中进行jQuerify并进行点击测试：

$(".avatar").on("click", function(){ console.log("works!");});

你可以点击框的其余部分......无论如何我可以做这样的事情并且能够点击UNDERNEATH？我试图让一个圆圈蒙面......但我不想点击顶部的圆圈...我想点击下面的东西..比如如果你有一个角钱在一个季度的顶部而你可以像托盘一样看到较大硬币的边缘......