使用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

回答