<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait" onload="setTimeAndSnapshot(2, true)"> <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title> <script xlink:href="smil-util.js" type="text/javascript"/> <defs> <filter id="f"> <feConvolveMatrix order="1" kernelMatrix="1" edgeMode="none"> <!-- Animate the kernel matrix dimensions from 1x1 to 5x5. --> <animate attributeName="order" calcMode="linear" begin="0s" dur="4s" from="1" to="5 5" fill="freeze"/> <!-- Animate the kernel matrix values. Each successive matrix blurs the image more. We will pause on the 3x3 matrix. --> <animate attributeName="kernelMatrix" calcMode="linear" begin="0s" dur="1s" from="1" to="1 1 1 1" fill="freeze"/> <animate attributeName="kernelMatrix" calcMode="linear" begin="1s" dur="1s" from="1 1 1 1" to="1 1 1 1 1 1 1 1 1" fill="freeze"/> <animate attributeName="kernelMatrix" calcMode="linear" begin="2s" dur="1s" from="1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" fill="freeze"/> <animate attributeName="kernelMatrix" calcMode="linear" begin="3s" dur="1s" from="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" fill="freeze"/> </feConvolveMatrix> </filter> </defs> <g filter="url(#f)"> <!-- The edge between the orange rect and the blue rect will become blurry. --> <rect x="10" y="10" width="50" height="100" fill="orange"/> <rect x="60" y="10" width="50" height="100" fill="blue"/> </g> </svg>