<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
<!-- Test 'to' animation. -->
<path d="M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
">
<animate attributeName="d"
calcMode="linear"
begin="0s" dur="3s"
to="M10,10
L40,10
l-30,60
H40
V10
h30
v60
M80,10
C110,10 95,70 110,70
S110,10 140,10
m10,0
c30,0 15,60 30,60
s0,-60 30,-60
M220,40
Q235,98 250,40
T280,40
M290,40
q15,58 30,0
t30,0
M372,70
A30,15 -90 1 1 384,70
M410,70
a30,15 -90 1 1 12,0
"
fill="freeze"/>
</path>
<!-- Test 'by' animation. -->
<path transform="translate(0, 70)"
d="M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
">
<animate attributeName="d"
calcMode="linear"
begin="0s" dur="3s"
by="M0,0
L21,0
l-21,42
H21
V0
h21
v42
M0,0
C30,-30 15,60 21,60
S12,-30 42,0
m-30,0
c30,-30 15,60 21,60
s-9,-90 21,-60
M0,30
Q15,78 21,21
T42,30
M0,30
q15,48 21,-9
t21,9
M12,51
A21,6 -90 1 1 6,51
M0,51
a21,6 -90 1 1 -6,0
"
fill="freeze"/>
</path>
<!-- Test calcMode="paced". -->
<path transform="translate(0, 140)">
<animate attributeName="d"
calcMode="paced"
begin="0s" dur="3s"
values="
M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
;
M10,10
L33,10
l-23,46
H33
V10
h23
v46
M80,10
C100,20 90,50 103,50
S106,20 126,10
m20,0
c20,10 10,40 23,40
s3,-30 23,-40
M220,30
Q230,72 243,33
T266,30
M290,30
q10,42 23,3
t23,-3
M368,53
A23,13 -60 1 1 382,53
M410,53
a23,13 -60 1 1 14,0
;
M10,10
L40,10
l-30,60
H40
V10
h30
v60
M80,10
C110,10 95,70 110,70
S110,10 140,10
m10,0
c30,0 15,60 30,60
s0,-60 30,-60
M220,40
Q235,98 250,40
T280,40
M290,40
q15,58 30,0
t30,0
M372,70
A30,15 -90 1 1 384,70
M410,70
a30,15 -90 1 1 12,0
"
fill="freeze"/>
</path>
<!-- Test calcMode="discrete". -->
<path transform="translate(0, 210)"
d="M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
">
<animate attributeName="d"
calcMode="discrete"
begin="0s" dur="2s"
to="M10,10
L40,10
l-30,60
H40
V10
h30
v60
M80,10
C110,10 95,70 110,70
S110,10 140,10
m10,0
c30,0 15,60 30,60
s0,-60 30,-60
M220,40
Q235,98 250,40
T280,40
M290,40
q15,58 30,0
t30,0
M372,70
A30,15 -90 1 1 384,70
M410,70
a30,15 -90 1 1 12,0
"
fill="freeze"/>
</path>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(4);
if (window.testRunner)
testRunner.notifyDone();
}
</script>
</svg>
Codebase Browser
chromium