在 IE10 的 CSS 中使用 SVG 过滤器答案

【问题标题】：Using SVG filters in CSS for IE10在 IE10 的 CSS 中使用 SVG 过滤器
【发布时间】：2013-01-06 00:04:10
【问题描述】：

IE10 已放弃对 DirectX 图像处理的支持；它现在使用 SVG 标准。但是，例如，在 Firefox 中，您可以将 svg 过滤器应用于任何 <img> 元素，但在 IE10 中，我似乎只能让它处理 <svg> <image ... /> </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 中进行任何滤镜效果呢？我觉得我一定是错过了什么......

希望这能解决问题

【问题讨论】：

我认为 Firefox 在 CSS 中不支持 filter。您可以在您的问题中添加代码示例吗？
更新了一些代码，可怕的代码，但是一些代码:)
这个 partially works 在 Chrome 中（<text> 是不可见的），其他浏览器在显示它时会出现各种问题。我通常使用选项 2（在每个 <svg> 元素内定义过滤器），但这次我无法让它工作。
是的，我最终做了两个实现，一个带有和普通 CSS 过滤器（用于 chrome 和 ie 9 及以下），另一个带有里面有过滤器；根据用户浏览器显示不同的实现。凌乱... ^^
您是否设法将过滤器应用于 svg 标签之外的图像？这真的很糟糕:(。只有 IE10 给出了这个问题！

标签： css image internet-explorer-10 svg-filters

【解决方案1】：

如果您需要 IE10+ 中的特定样式，它会在 CSS 中使用：

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

【讨论】：

问题更多的是我想应用到一个元素的特定样式只有在它是一个 SVG 元素时才有效，而且这非常糟糕
@Hazza 我遇到了同样的问题。除了使用 SVG，我还没有找到令人满意或正确的答案。这很糟糕。

【解决方案2】：

如果您在公司内部执行此操作，您可以向您的系统管理员请求configure IE10's group policy to accept the old-style filter syntax。如果你在开放的互联网上这样做，那么你就是 SOL。新内容仅适用于 svg 元素，旧内容已被删除。

【讨论】：