面具不能在Internet Explorer中工作

大家好，我試圖從一側模糊圖像的邊緣，使用蒙版屬性，以便身體標記的背景與圖像融爲一體。看看下面的圖片。面具不能在Internet Explorer中工作

enter image description here

我已經試過link指其上所有的瀏覽器，但除了IE和Opera完美地運行。儘管我已經在很多博客中看到屏蔽財產與IE無法正常工作。請在下面找到我的代碼片段

<svg width="503" height="373"> 
    <defs> 
     <filter id="filter"> 
      <feGaussianBlur stdDeviation="10" /> 
     </filter> 
     <mask id="mask"> 
      <rect y="0" height="400" width="300" fill="white" filter="url(#filter)" ></rect> 
     </mask> 
    </defs> 
    <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="503" height="373" mask="url(#mask)"></image> 
    <foreignObject width="503px" height="373px" style="mask: url(#mask);"></foreignObject> 
</svg>

如果我無法做到這一點與掩蔽，那麼請建議我一些很好的解決方案。

來源

2015-04-06 Deeps

我想我明白了，IE瀏覽器如何做。這裏是Fiddle

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"> 
 
     <defs> 
 
     <linearGradient id="gradient1" spreadMethod="pad" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
      <stop stop-color="#ffffff" stop-opacity="1" offset="70%" /> 
 
      <stop stop-color="#000000" stop-opacity="1" offset="100%" /> 
 
     </linearGradient> 
 
     <mask id="mask4" x="0" y="0" width="300" height="200"> 
 
      <rect style="fill: url(#gradient1); stroke: none;" x="0" y="0" width="200" height="200" /> 
 
     </mask> 
 
     </defs> 
 
     <image mask="url(&quot;#mask4&quot;)" width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" /> 
 
    </svg>

來源

2015-04-07 08:13:52 Deeps

我會建議在Photoshop中編輯照片並使用它來代替遮罩。這意味着瀏覽器將呈現圖像而不是CSS。網上有很多教程會告訴你如何在Photoshop上編輯照片。

此外，此解決方案Martin Beeby似乎工作。雖然看起來很複雜！

祝你好運...

來源

2015-04-06 13:00:23

這不會是一個很好的解決方案，如果有使用多個圖像或者圖像動態加載。我認爲OP正在尋找更通用的解決方案。 – 2015-04-06 13:02:04

@ SamyS.Rathore IE看起來並不支持IE，所以如果OP希望它能在IE上工作，這是唯一的解決方案。 – 2015-04-06 13:04:16

有幾個選項可以在IE中工作（[例如]（http://jsfiddle.net/w4usc5bs/1/）），這可能會改變和使用不同的方式 – 2015-04-06 13:10:06

面具不能在Internet Explorer中工作

回答

相關問題