在CSS中對IE10使用SVG過濾器

IE10已經不再支持其DirectX圖像操作;它現在使用SVG標準。但是，例如，在Firefox中，您可以對任何<img>元素應用svg過濾器，但在IE10中，我似乎只能將它用於<svg> <image ... /> </svg>中的圖像。在CSS中對IE10使用SVG過濾器

我是否需要爲不同的瀏覽器編寫單獨的標記？這似乎是錯誤的。

我試過使用像-ms-filter過濾器的CSS過濾器，但沒有一個在IE10上工作。

更新1：

好吧，所以我想我可能不會特別清楚。

<!DOCTYPE html> 
<style> 
    .pop { 

     filter: url(#pixelate); 

    } 

    .pop:hover { 
     filter: none; 
    } 

    .lol { 
     filter: url(#pixelate); 
    } 

    .lol:hover { 
     filter: none; 
    } 

    .svgRoot 
{ 
    height: 150px; 
    width: 200px; 
} 
</style> 
<svg class="svgRoot"> 
<image class="lol" x="0" y="0" width="100px" height="100px" xlink:href="http://i.imgur.com/M5TIb.jpg" /> 
</svg> 

<svg class="svgRoot"> 
    <defs> 
     <filter id="pixelate"> 
      <feMorphology operator="erode" radius="2" /> 
     </filter> 
    </defs> 
    <image x="0" y="0" width="100px" height="100px" xlink:href="http://i.imgur.com/M5TIb.jpg" filter="url(#pixelate)" /> 
    <text class="svgText" x="25%" y="90%" filter="url(#pixelate)">SVG text</text> 
</svg> 

<img src="http://i.imgur.com/M5TIb.jpg" width="100" class="pop">

在Firefox中，最後一個元素<img>過濾器工作。但是，它不在IE10中。使用帶DX的IE4-IE9可以達到同樣的效果。效果。但是IE10實現了SVG。但它似乎只適用於<svg>標籤中包含的元素。那麼如何在IE10中做任何濾鏡效果而不寫入不同的標記呢？我覺得我必須失去了一些東西......

希望如果您需要在IE10 +特定樣式這個清除它

來源

2013-01-22 Hazza

我不認爲Firefox在CSS中支持'filter'。你能爲你的問題添加一個代碼示例嗎？ – Pavlo

更新了一些代碼，可怕的代碼，但一些代碼:) – Hazza

這[部分作品]（http://jsfiddle.net/aSUSr/1/）在Chrome（''是不可見的），其他瀏覽器有各種問題顯示它。我通常使用選項2（在每個' Pavlo

，它會在CSS皮卡使用：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { styles here }

來源

2013-01-22 17:42:42 Taraes

問題是，我想應用於一個元素的特定風格只適用於如果它是一個SVG元素，非常糟糕 – Hazza

@Hazza我遇到了同樣的問題，除了使用SVG之外，我還沒有找到令人滿意的或正確的答案。 –

如果您在公司內部這樣做，您可以請求您的系統管理員登錄到configure IE10's group policy to accept the old-style filter syntax。如果你在開放的互聯網上這樣做，那麼你就是SOL。新的東西只適用於svg元素，舊的東西已被刪除。

來源

2014-02-26 00:44:09

在CSS中對IE10使用SVG過濾器

回答

相關問題