使用SVG剪輯（或蒙版）DIV

我搜索了很多，我剛剛放棄了，所以我會轉向那裏的專家，看看是否有人可以幫助我在我的追求。使用SVG剪輯（或蒙版）DIV

我已通過插圖畫家將徽標轉換爲.SVG。

我的目標是使用該徽標剪輯（或者如果您願意的話可以掩飾）整個div，以便只顯示整個div的一小部分，您可以看到背景。

我決定採用.SVG的方式，因爲我想創建這個網站作爲一個完全可擴展的體驗，因此.png無法準確地從全高清分辨率到1024x768。

因此，首先我想知道如何剪輯Div並同時如何「反向剪輯」，以便不僅僅顯示div的一部分，而是顯示除了它之外的所有內容。

我會熱切地等待着你的答案，因爲我真的需要他們...

預先感謝您。

2012-04-23 LIMsomnium

澄清你想要做什麼...你想覆蓋整個div（有一個正方形），只允許一個洞是你的logo的形狀？這是否意味着徽標是一條簡單的路徑？ – mihai 2012-04-23 20:32:52

如果我正確地理解了你（並且我不確定），你想在背景中顯示'符合你的徽標形狀的所有東西'，這是否正確？如果可以的話，那就是「反轉」你的標誌，讓它變得透明，讓背景呈現出黑色或白色等中性色彩。然後你可以把兩個div放在一起，頂部是你的Logo。

我創建了一個小提琴向你展示我的意思： http://jsfiddle.net/ds82/R4rBH/2/

明鏡圈的標誌，它是透明的內部和藍線外，這是一個SVG。希望這是你想要的。

2012-05-07 12:45:24 dennis

還沒有看到你的答案。它絕對有效。將不得不徹底思考，看看它是否支付使用，而不是一個.png。你怎麼看？ – LIMsomnium 2012-05-16 15:55:46

我不認爲你將能夠做到這一點。我曾經看到過一個插件和一個生成器like this，但我認爲這可能不是你最好的選擇。

我會合並任何你想要剪輯的文本，我肯定比找到一種方式讓你的html與svg正確交互更容易。

2012-04-23 19:57:38

我不認爲他對包裝感興趣，他可能只是想要視覺剪輯div – mihai 2012-04-23 20:05:12

好吧，因爲我無法通過.svg完成，我最終只使用了一個.png，其中一切都是黑色的，而我的Logo是透明的。有種難過，我找不到答案雖然...

2012-05-16 15:44:03 LIMsomnium

基本上你想做的只是作品in Firefox此刻。該方法是在SVG定義正確<mask>元素，然後通過CSS應用它：

#content { 
    mask: url(remote.svg#logo-mask); 
}

（或者，如果你嵌入SVG :)

#content { 
    mask: url(#logo-mask); 
}

2012-05-16 15:55:06 Boldewyn

回答