blob: d24eb3b8d7bacbfcc84edf036492bb17cfb205b3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!--
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>
|
