什麼可以使Safari跳過剪輯路徑和SVG掩碼？

我沒有任何問題使用剪輯路徑與Firefox中的.svg文件鏈接，但Safari似乎拒絕使用它們。什麼可以使Safari跳過剪輯路徑和SVG掩碼？

如果您在Firefox中加載我的WIP頁面http://www.omakadesign.com，您將在菜單底部看到蝴蝶圖案，但如果您在Safari中加載它，則菜單完全是矩形。

相關行出現在main.css的（221），看起來像：

clip-path: url("../img/menu-news.svg#news-clip");

似乎有大約夾路徑和Safari，以及有關在這個網站上沒有多少問題的信息非常少或者（相信我看過）。但是，再次，我甚至無法獲得最基本的內聯svg示例，即使在Firefox中也可以使用clip-path工作，所以在這個主題上可能存在一些根本性的錯誤？

（另外，雖然這是另一個問題，爲什麼這些菜單具有兩個空白和邊距底部是一個謎給我，因爲我用最小寬度爲零出來...）

UPDATE：

我做了一個測試，並在其中創建了一個帶有掩碼標籤的.svg文件，並用css掩碼代替了上面顯示的剪輯路徑行（如果您想使用Firefox樣式編輯器嘗試它，仍然是221）仍然適用於Firefox和Safari STILL跳過它：

mask: url("../img/menu-news-mask.svg#news-mask");

（最終更新：找到了解決方案，但我不允許再發布它5個小時......事實證明，您必須使用非常非常特定的SVG併爲Safari使用-webkit-mask。）

來源

2013-05-15 eobet

嘗試一些其他的例子，如http://www.svgbasics.com/clipping.html或http://labs.sawyerhollenshead.com/lab/svg-clippath/在您的操作系統版本以比較結果 –

請在此處查看SVG的瀏覽器支持：http://caniuse.com/#search=svg這可能有助於解釋您的情況。 –

這兩個示例都可以工作，但我試圖自己重新創建第二個示例，並將自己的SVG文件中的數據粘貼到該示例中，但無法在Firefox或Safari中顯示它，所以這就是我認爲的'缺少一些基本的東西...（順便說一句，這些例子都沒有使用外部引用，我真的很想保留它。） – eobet

我找到了解決辦法。你必須使用非常具體的SVG代碼！按照這個傢伙的信的例子，裁剪將在Safari工作太：

https://github.com/Modernizr/Modernizr/issues/213#issuecomment-1149691

（對不起張貼我自己的答案爲我自己的第一個問題，但我真的很絕望，我經常發現，當你開始詢問其他人的時候，那就是你偶然發現的解決方案......）

編輯：在IE9中不工作，我並不真正關心，但只是爲了那些誰後備只是一個簡單的矩形菜單對我來說仍然有效）。

來源

2013-05-16 06:48:47 eobet

也許有人可以解釋這一點？我不明白 – SereznoKot

對於你的問題的第二部分（..why這些菜單兼得空白和邊距底部..）：

的main.css線95

nav a { 
    background: none repeat scroll 0 0 #616161; 
    color: white; 
    display: block; 
    font: 12px/20px Lucida Sans Unicode,Lucida Grande,Lucida Sans; 
    margin-bottom: 10px; 
    padding: 15px 0; 
    text-align: center; 
    text-decoration: none; 
}

來源

2013-05-15 20:26:47

對，如果你滾動到188行的最小寬度的情況下，不應該覆蓋這個？ – eobet

沒有.css文件中必須有錯誤，因爲它沒有被應用。行：327形狀定義中的分隔符無效。它必須是逗號。 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.omakadesign.com%2Fcss%2Fmain.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en –

也許如果這些都是.css中的真正錯誤，它可能會修復你的頁面行爲。 –

感謝您將Modernizr的github鏈接！

有關如果剪裁圖像的說明，重要的是路徑必須位於clipPath的內部。

請注意，如果您從Illustrator中導出SVG代碼。只要確保使用實際的路徑，而不是這樣的：

<defs> 
    <path id="path" d="...."> 
</defs> 
<clipPath id="clipping"> 
    <use xlink:href="#path"/> 
</clipPath> 
<image clip-path=url(#clipping) ...>

到實際路徑這樣的...

<clipPath id="clipping"> 
    <path id="path" d="...."> 
</clipPath> 
<image clip-path=url(#clipping) ...>

它將在FF，Chrome瀏覽器，Safari瀏覽器，Opera和IE9 工作，這裏的jsfiddle

編輯

原來的問題，現在我才意識到是一個稍微不同的問題比我有什麼...這是使用svg路徑剪輯圖像外部作爲一個img標籤的svg。不幸的是，當我嘗試完全相同的方法時，即使10個IE也不起作用。因此，如果你有一個單一的圖像，最好是將圖像嵌入到svg本身中，而不是用路徑剪輯img標籤。這對IE9 & 10，然後一些..

來源

2013-08-21 14:46:13 Mon

什麼可以使Safari跳過剪輯路徑和SVG掩碼？

回答

相關問題