Forum Discussion

Bgt720's avatar
Bgt720
Copper Contributor
May 26, 2024

EDGE currently does not support SVG Is the filter animation API available?

The previous 1518 Edge version had good support for SVG filter animations, but it has been discontinued in recent versions. Can the edge team tell us if an error has occurred or if it will never be supported? We are waiting. We tested the web animation API, CSS animations do not support SVG filter attribute animations. If the SVG filter attribute animation is cancelled, it means that no API supports filter attribute animation.

  • Bgt720's avatar
    Bgt720
    Copper Contributor
    May 26, 2024
    The following code, edge version 1518, runs normally. There is no effect now.
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <filter id="f_29_40" x="0%" y="0.1%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
    <feTurbulence id="feTurbulence_29_40_1" x="0%" y="0%" width="100%" height="100%" baseFrequency="0.02 0" numOctaves="3" result="feTurbulence_29_40_1" stitchTiles="noStitch" type="turbulence" seed="0">
    </feTurbulence>
    <feDiffuseLighting id="feDiffuseLighting_29_40_1" x="0%" y="0%" width="100%" height="100%" surfaceScale="2" lighting-color="white" diffuseConstant="23" in="SourceGraphic" result="feDiffuseLighting_29_40_1">
    <feSpotLight id="feDiffuseLighting_29_40_1_S" x="60" y="80" z="5" pointsAtX="500" pointsAtY="80" pointsAtZ="1" specularExponent="0" limitingConeAngle="60">
    </feSpotLight>
    </feDiffuseLighting>
    </filter>
    </defs>

    <rect id="rect_3_160_1" x="0" y="0" rx="0" ry="0" width="400" height="300" stroke="#000" stroke-width="1" stroke-dasharray="none" fill-opacity="1" fill="url(#r_29_36)" stroke-opacity="1" filter="url(#f_29_40)" mask="none" clip-path="none" class="rect1" transform="skewX(0) skewY(0) translate(0 0) scale(1 1) rotate(0 0 0)" style="visibility: visible;" data-time="45"></rect>
    <animate id="feDiffuseLighting_29_40_S_1" attributeName="specularExponent" dur="20" repeatCount="indefinite" additive="replace" fill="remove" begin="0s" end="indefinite" values="0;100" restart="always" calcMode="linear" href="#feDiffuseLighting_29_40_1_S"></animate>
    </svg>

Resources