4

IE10 has dropped support for its DirectX image manipulations; it now uses the SVG standards. However, in Firefox, for example, you can apply an svg filter to any <img> element but in IE10, and I can only seem to get it to work on images in <svg> <image ... /> </svg>.

Do I need to write separate markup for different browsers? That seems wrong.

I tried using the CSS filters like -ms-filter filter but none of those worked on IE10.

UPDATE 1:

Okay so I guess I may not have been particularly clear. 

<!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">

In Firefox, the last element, the <img>, the filter works. However, it doesn't in IE10. I could achieve the same affect here using IE4-IE9 with DX. effects. But IE10 implements SVG. However it only seems to work on elements contained within the <svg> tag. So how am I to do any filter effects in IE10 without writing different markup? I feel like I must be missing something...

Hope this clears it up

Improve this question
6
  • I don't think Firefox supports filter in CSS. Can you add a code sample to your question?
    – Pavlo
    Commented Jan 22, 2013 at 19:57
  • Updated with some code, horrible code, but some code :)
    – Hazza
    Commented Jan 22, 2013 at 23:37
  • This partially works in Chrome (<text> is invisible), other browser have various problems displaying it. I usually use option 2 (define filters inside each <svg> element), but I can't get it working this time.
    – Pavlo
    Commented Jan 23, 2013 at 10:51
  • Yeah what I ended up doing was having two implementations, one with <img> and normal CSS filters (for chrome and ie 9 and below), and another with <svg><image...></svg> with the filter inside; displaying the different implementations based on the users browser. Messy... ^^
    – Hazza
    Commented Jan 24, 2013 at 0:10
  • have you managed to apply filters to images outside svg tags? This truly sucks :(. Only IE10 giving this issue!
    – pewpewlasers
    Commented Jun 17, 2013 at 8:39

2 Answers 2

Reset to default
1

If you need a specific style in IE10+, it'll pickup in CSS using:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { styles here }
Improve this answer
2
  • 1
    The problem is more that the specific style I want to apply to an element only works if it is an SVG element and that pretty much sucks
    – Hazza
    Commented Jan 22, 2013 at 18:14
  • @Hazza I'm running into the same issue. I haven't found a satisfying or correct answer yet except to use SVG. Which sucks.
    – David Eads
    Commented Aug 15, 2013 at 18:52
0

If you are doing this inside a company, you can petition your sys admins to configure IE10's group policy to accept the old-style filter syntax. If you are doing this on the open internet, then you are SOL. The new stuff only works on svg elements and the old stuff has been removed.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.