2

I have this SVG code in my HTML that renders a triangle with a shadow below it:

<svg class="svg-triangle">
    <defs>
        <filter id="shadow" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="-1" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2,5" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <polygon points="0,0 22,0 11,7" filter="url(#shadow)"/>
</svg>

That code works fine on Chrome and Firefox, but that's what happens when it get rendered on Internet Explorer 11, the gaussian blur stdDeviation value becomes:

<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1.65726e+009" />

And the shadow is obviously not showed

Any ideas on why this is happening?

Thank you

Cirou
  • 1,420
  • 12
  • 18
  • The "strange" value, 1.65726e+009 is taken directly from the DOM explorer in Internet Explorer – Cirou Apr 10 '17 at 15:53
  • have you tried a space instead of a comma? – Robert Longson Apr 10 '17 at 20:47
  • Tried with "2 5", that's working on Chrome/Firefox but on IE the value in the page is now "1.7414e+009" and is still not working – Cirou Apr 11 '17 at 07:58
  • On my copy of IE11 it looks fine. Almost identical to Chrome. – Paul LeBeau Apr 11 '17 at 14:01
  • There was no way to make it work so I tried this workaround that did its job perfectly, I set an "id" on the "feGaussianBlur" element and then with JS i did "document.getElementById("blur").setStdDeviation(2, 5);" – Cirou Apr 12 '17 at 11:04

0 Answers0