SVG圖像蒙版在Firefox或IE中無法使用

我很容易用PNG（黑色圓圈，透明背景）製作蒙版，並使用-webkit-mask-image:url(images/mask.png)用於Chrome等瀏覽器。但我有嚴重的問題讓掩模在Firefox中顯示使用SVGSVG圖像蒙版在Firefox或IE中無法使用

<svg> 
    <defs> 
     <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> 
      <image width="78px" height="78px" xlink:href="images/mask.png"/> 
     </mask> 
    </defs> 
    <foreignObject width="78px" height="78px" style="mask: url(#mask);"> 
     <img src="images/avatar-sample.jpg" /> 
    </foreignObject> 
</svg>

我真的不明白爲什麼這不起作用！

來源

2013-05-01 Glen

確定我得到它的工作，但它似乎圖像移動到一些隨機的地方 – Glen 2013-05-01 15:45:48

還行吧。在FF中工作，但不是IE ... – Glen 2013-05-01 15:47:27

根據http://www.w3.org/TR/SVG/propidx.html，您可以將掩碼應用到container elements和graphics elements。不幸的是<foreignObject>不在這些列表中，因此該元素的正確渲染是忽略掩碼屬性。因此IE和Firefox在渲染這個例子時是正確的。

來源

2013-05-01 22:20:29

我認爲將mask/clip-path/filter應用於foreignObject也是有意義的。請注意，IE不支持foreignObject（至少它沒有上次我嘗試過）。 Firefox似乎處理foreignObject上的'filter'屬性（fiddle：http://jsfiddle.net/UYZW9/），'filter'適用於與'mask'相同的元素（容器和圖形元素）。無論如何，我認爲所有這些屬性都將擴展到「全部」元素。 – 2013-05-14 15:25:06

因爲IE不理解「外部」對象，所以你必須用JavaScript解決它，並檢查是否可以支持它，如果是的話注入它，如果不是避免它。那麼你必須使用IE內置的彩色濾鏡來爲IE創建自己的色度鍵效果。下面的這個網站向您展示瞭如何使用示例進行操作。

http://thenittygritty.co/css-masking

來源

2013-07-30 13:41:20 Zuriel

-1

你可以重寫你的SVG這樣使它在所有SVG支持的瀏覽器工作：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> 
      <image width="78" height="78" xlink:href="images/mask.png"/> 
     </mask> 
    </defs> 
    <image xlink:href="images/avatar-sample.jpg" width="78" height="78"/> 
</svg>

來源

2013-08-23 10:46:02

SVG圖像蒙版在Firefox或IE中無法使用

回答

相關問題