如何使svg蒙版圖像與Internet Explorer兼容

最近，我創建了一個svg蒙版圖像，它在Chrome中完美工作，但在我的Internet Explorer版本中無法正常工作。下面是我的SVG預計最終的結果如何使svg蒙版圖像與Internet Explorer兼容

這是我的SVG代碼

<svg width="0" height="0" viewBox="0 0 160 160"> 
    <defs> 
    <clipPath id="shape"> 
     <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" /> 
    </clipPath> 
    </defs> 
</svg> 

<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' /> 
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />

這是我的CSS

* { 
    padding: 0; 
    margin: 0; 
} 
.photo_rectangle_inverse { 
    height: 160px; 
    width: 170px; 
    -webkit-clip-path: url(#shape); 
    clip-path: url(#shape); 
    position: relative; 
    -webkit-transform: translateZ(1px) 
}

由於SVG不是在互聯網工作瀏覽器（IE 11），在閱讀this article，談到與瀏覽器的兼容性問題後，我添加了

<meta http-equiv="X-UA-Compatible" content="IE=edge">

我的頁面頂部因爲基於IE Edge的文章似乎與Svg最兼容。

但仍然顯示svg形狀。

這是Jsfiddle。注意Jsfiddle不允許元標記

如何使svg蒙版圖像與Internet Explorer兼容？

韓國社交協會

來源

2015-08-24 Man Of God

如何嗎？你可以更具體一些，或者給我一個基於我已經寫過的例子嗎？ Tks –

感謝它的工作。但它不顯示形狀的左角。它削減它。你能幫我解決嗎？你可以添加這個答案，以便我可以驗證它。 Jsfiddle http://jsfiddle.net/manofgod/omat2km1/3/ –

IE將不適用的SVG夾到一個HTML元素，因此你需要一個SVG <image>元素，而不是如一個<html> img元素

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.photo_rectangle_inverse { 
 
    -webkit-clip-path: url(#shape); 
 
    clip-path: url(#shape); 
 
    position: relative; 
 
    -webkit-transform: translateZ(1px) 
 
}

<svg height="100%" width="100%" > 
 
     <defs> 
 
     <clipPath id="shape"> 
 
      <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" /> 
 
     </clipPath> 
 
     </defs> 
 

 
     <image height="160px" width="170px" xlink:href='http://i.imgur.com/NR6kefg.jpg'; class='photo_rectangle_inverse'/> 
 
     <image transform="translate(170,0)" height="160px" width="170px" xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' /> 
 
    </svg>'

來源

2015-08-24 13:22:17

謝謝，但請如何在同一行上顯示兩個圖像，就像我在問題中所做的一樣。你給我的答案只顯示一個圖像。 Jsfiddle http://jsfiddle.net/manofgod/omat2km1/5/ –

是的，先生，但它是我的問題的一部分。你能幫我解決嗎？謝謝 –

我已經做到了。在答案中按運行代碼片段。有兩個圖像。 –

如何使svg蒙版圖像與Internet Explorer兼容

回答

相關問題