feTurbulence SVG filter result differs against standard

Issue #12382004 • Assigned to Bogdan B.

Details

Author
Cody O.
Created
Jun 18, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Applying feTurbelence to an SVG element should cause the same result across major browsers (Edge, Chrome, IE11, Firefox, Safari) according to the C code linked from the standards example at https://www.w3.org/TR/SVG/filters.html#feTurbulenceElement. However, while Firefox, Chrome, and Safari create an identical effect, Edge and IE11 differ.

See: https://codepen.io/quitedensepoint/pen/RgKOew
Edge-IE11-feTurbulence: http://imgur.com/zLRPntD
Firefox-feTurbulence: http://imgur.com/lPOCboI
Chrome-feTurbulence: http://imgur.com/QFxxE6H

Code:
<svg width="200" height="200" viewBox="0 0 220 220"
xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence type="turbulence" baseFrequency="0.05"
numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="50" xChannelSelector="R" yChannelSelector="G"/>
</filter>

<circle cx="100" cy="100" r="100"
style="filter: url(#displacementFilter)"/>
</svg>

Attachments

0 attachments

    Comments and activity

    • Changed Title from “feTurbulence SVG filter differs against major engines” to “feTurbulence SVG filter result differs against standard”

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Bogdan B.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in