文章/答案/技术大牛

发布

社区首页 >问答首页 >在IE10的CSS中使用SVG过滤器

问在IE10的CSS中使用SVG过滤器
EN

Stack Overflow用户

提问于 2013-01-23 01:01:44

回答 2查看 2.7K关注 0票数 4

IE10已经放弃了对其DirectX图像操作的支持；它现在使用SVG标准。但是，例如，在Firefox中，您可以将svg filter应用于IE10以外的任何<img>元素，而我似乎只能让它在<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">

在火狐中，最后一个元素，<img>，过滤器起作用了。然而，在IE10中不是这样的。我可以在这里使用带有DX的IE4-IE9来达到同样的效果。效果。但是IE10实现了SVG。但是，它似乎只对包含在<svg>标记中的元素起作用。那么，如何在不编写不同标记的情况下在IE10中实现滤镜效果呢？我觉得我一定错过了什么..。

希望这篇文章能澄清这个问题

css

image

internet-explorer-10

svg-filters

回答 2

Stack Overflow用户

发布于 2013-01-23 01:42:42

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

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

票数 1

Stack Overflow用户

发布于 2014-02-26 08:44:09

如果你在一家公司内部这样做，你可以向configure IE10's group policy to accept the old-style filter syntax申请你的系统管理员。如果你是在开放的互联网上做这件事，那么你就是SOL。新的东西只适用于svg元素，旧的东西已经被移除了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14463969

复制

相似问题

问在IE10的CSS中使用SVG过滤器
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在IE10的CSS中使用SVG过滤器EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在IE10的CSS中使用SVG过滤器
EN