使用SVG的Webkit掩码

我正在开发一个网页，它有点问题。使用SVG的Webkit掩码

我使用.SVG文件来掩盖图像的一部分。

它可以正常工作在Firefox，Safari浏览器，但只有在OS X下

适用于Chrome，我想知道为什么？有任何想法吗？

下面是一个例子页面，在这里我得到了同样的问题：http://girliemac.com/sandbox/mask.html

由于提前，

Jk_

2011-12-26 Jk_

任何想法为什么你可以剪辑SVG文件，但不是嵌入式SVG？假设你使用'url（＃twitter-bird）'代替。任何方式来工作？ – bozdoz 2013-07-23 23:29:46

尝试使用不同的值进行实验是这样的：

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

似乎就像它与缩放有关。为什么？因为它仍处于实验阶段。

2011-12-27 00:40:14 bennedich

感谢您的支持！你仍然是实验性的你是对的。但我试图找到最佳的交叉浏览器解决方案来掩盖图像。当我使用border-radius时，我会遇到Chrome的错误，所以我想到了SVG。我将尝试使用画布遮罩。干杯。 – 2011-12-27 09:20:06

这看起来不错，但如果你jQuerify在Chrome和做的命中测试：

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

您可以单击框休息...反正我做像这样的东西，并能够点击UNDERNEATH？我正在尝试屏蔽一个圈子...但我不想点击顶部的圆圈...我想单击下面的东西..例如，如果您在一个季度的顶部有一毛钱，而您可以看到较大硬币的边缘像托盘...

2013-06-18 20:17:49 dapinitial

回答