Использование фильтров SVG в CSS для IE10

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 этого нет. Я мог бы добиться того же эффекта здесь, используя IE4-IE9 с DX. эффекты. Но IE10 реализует SVG. Однако похоже, что это работает только с элементами, содержащимися в теге <svg>. Итак, как мне сделать какие-либо эффекты фильтра в IE10 без написания другой разметки? Я чувствую, что я должен что-то упустить...

Надеюсь, это прояснит это


image css internet-explorer-10 svg-filters
person Hazza    schedule 22.01.2013    source источник
comment
Я не думаю, что Firefox поддерживает filter в CSS. Можете ли вы добавить пример кода к своему вопросу?   -  person Pavlo    schedule 22.01.2013
comment
Обновлено с некоторым кодом, ужасным кодом, но некоторым кодом :)   -  person Hazza    schedule 23.01.2013
comment
Этот частично работает в Chrome (<text> невидим), в других браузерах возникают различные проблемы с его отображением. Обычно я использую вариант 2 (определение фильтров внутри каждого элемента <svg>), но на этот раз я не могу заставить его работать.   -  person Pavlo    schedule 23.01.2013
comment
Да, в итоге у меня было две реализации: одна с ‹img› и обычными фильтрами CSS (для chrome и т.е. 9 и ниже), а другая с ‹svg›‹image...›‹/svg› с фильтром внутри ; отображение различных реализаций на основе браузера пользователей. Грязно... ^^   -  person Hazza    schedule 24.01.2013
comment
вам удалось применить фильтры к изображениям вне тегов svg? Это действительно отстой :(. Только IE10 выдает эту проблему!   -  person pewpewlasers    schedule 17.06.2013
comment
Извините, мне пришлось использовать теги ‹svg› для IE10 :(   -  person Hazza    schedule 24.06.2013

Ответы (2)


arrow_upward
1
arrow_downward

Если вам нужен определенный стиль в IE10+, он будет подобран в CSS, используя:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { styles here }
person Taraes    schedule 22.01.2013
comment
Проблема в том, что конкретный стиль, который я хочу применить к элементу, работает только в том случае, если это элемент SVG, а это в значительной степени отстой. - person Hazza; 22.01.2013
comment
@Hazza У меня та же проблема. Я еще не нашел удовлетворительного или правильного ответа, кроме использования SVG. Что отстой. - person David Eads; 15.08.2013

arrow_upward
0
arrow_downward

Если вы делаете это внутри компании, вы можете обратиться к системным администраторам с просьбой настроить группу IE10. политики, чтобы принять старый синтаксис фильтра. Если вы делаете это в открытом Интернете, то вы SOL. Новый материал работает только с элементами svg, а старый был удален.

person Michael Mullany    schedule 26.02.2014