4

IE10 已放弃对 DirectX 图像处理的支持；它现在使用 SVG 标准。但是，例如，在 Firefox 中，您可以将 svg 过滤器应用于<img>除 IE10 之外的任何元素，而我似乎只能让它在<svg> <image ... /> </svg>.

我需要为不同的浏览器编写单独的标记吗？这似乎是错误的。

我尝试使用过滤器之类的 CSS 过滤-ms-filter器，但这些过滤器都不适用于 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 中进行任何滤镜效果呢？我觉得我一定是错过了什么...

希望这可以清除它

4

2 回答 2

1

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { styles here }
于 2013-01-22T17:42:42.417 回答
0

如果您在公司内部执行此操作，您可以请求系统管理员配置 IE10 的组策略以接受旧式过滤器语法。如果你在开放的互联网上这样做，那么你就是 SOL。新内容仅适用于 svg 元素，旧内容已被删除。

于 2014-02-26T00:44:09.467 回答