зеркало из https://github.com/mozilla/gecko-dev.git
54 строки
2.1 KiB
XML
54 строки
2.1 KiB
XML
|
<!--
|
||
|
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>
|