<?xml version="1.0" encoding="UTF-8"?>
<!--======================================================================-->
<!--= Copyright 2004 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, Institut National de Recherche en =-->
<!--= Informatique et en Automatique, Keio University). All Rights =-->
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
<SVGTestCase xmlns:testcase="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewer="CN" owner="VH" desc="Test on the animateTransform type attribute" status="accepted" version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-80-t.svg,v $">
<OperatorScript>
<Paragraph>
This test demonstrates validates the operation of the
animateTransform element and validates the operation
of the different type attribute values.
</Paragraph>
<Paragraph>
There are 5 possible values for the type attribute and
there is one animateTransform for each type and two for
the translate type.
</Paragraph>
<Paragraph>
For each transform type, the test has a corresponding animateTransform.
The test uses references to show what the expected transform should be
at different points in the animation. For example, the top left
animateTransform, for type=rotate, shows circular markers which turn
orange at the time of corresponding transform value should be set by the
animateTransform.
The marker elements show the expected transform value on reference
markers in the test.
</Paragraph>
</OperatorScript>
</SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-80-t.svg,v $</title>
<!--======================================================================-->
<!--Content of Test Case follows... =====================-->
<!--======================================================================-->
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<text text-anchor="middle" x="240" y="25" font-size="16"><animateTransform></text>
<defs>
<g id="ref" stroke="rgb(192,192,192)" fill="none">
<circle stroke-width="2" r="40"/>
<line x1="-45" x2="45"/>
<line y1="-45" y2="45"/>
</g>
</defs>
<g transform="translate(0,0)">
<g transform="translate(60,90)">
<use xlink:href="#ref"/>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/>
</line>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/>
</line>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/>
</line>
<line x2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="rotate" values="0;360;0" begin="2s" dur="4s"/>
</line>
<text y="60" text-anchor="middle">type=rotate</text>
</g>
<g transform="translate(180,110)">
<line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(0)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(45)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/>
</line>
<line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(-45)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/>
</line>
<line y2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="skewX" values="0;45;-45;0" begin="2s" dur="4s"/>
</line>
<text y="40" text-anchor="middle">type=skewX</text>
</g>
<g transform="translate(300,90)">
<g transform="translate(15,0)">
<line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(0)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(30)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/>
</line>
<line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(-30)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/>
</line>
<line x2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="skewY" values="0;30;-30;0" begin="2s" dur="4s"/>
</line>
</g>
<text y="60" text-anchor="middle">type=skewY</text>
</g>
<g transform="translate(420,90)">
<circle stroke="rgb(192,192,192)" stroke-width="4" r="40" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="30" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="20" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="10" transform="scale(4)">
<animateTransform attributeName="transform" type="scale" values="4,4;3,3;2,2;1,1" begin="2s" dur="3s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=scale</text>
<text y="75" text-anchor="middle">(sx and sy)</text>
</g>
<g transform="translate(20,180)">
<use xlink:href="#ref" x="40" y="40"/>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/>
</line>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/>
</line>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/>
</line>
<line x1="40" y1="40" x2="80" y2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="rotate" values="0 40 40;360 40 40;0 40 40" begin="2s" dur="4s"/>
</line>
<text y="100" x="40" text-anchor="middle">type=rotate</text>
<text y="115" x="40" text-anchor="middle">(with cx/cy)</text>
</g>
<g transform="translate(180,220)">
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="6" transform="translate(-40,0)">
<animateTransform attributeName="transform" type="translate" values="-40;-20;0;20;40" begin="2s" dur="4s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=translate</text>
<text y="75" text-anchor="middle">(tx only)</text>
</g>
<g transform="translate(300,220)">
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" cy="30" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" cy="15" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" cy="-15" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" cy="-30" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="6" transform="translate(-40,30)">
<animateTransform attributeName="transform" type="translate" values="-40,30;-20,15;0,0;20,-15;40,-30" begin="2s" dur="4s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=translate</text>
<text y="75" text-anchor="middle">(tx and ty)</text>
</g>
<g transform="translate(420,220)">
<circle stroke="rgb(192,192,192)" stroke-width="1" r="10" fill="none" transform="scale(4,4)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="1.3333" r="10" fill="none" transform="scale(3,3)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="2" r="10" fill="none" transform="scale(2,2)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none" transform="scale(1,1)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="10" transform="scale(4,4)">
<animateTransform attributeName="transform" type="scale" values="4;3;2;1" begin="2s" dur="3s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=scale</text>
<text y="75" text-anchor="middle">(sx only)</text>
</g>
</g>
<script>
// Pause the animation at t=0.
document.documentElement.pauseAnimations();
</script>
</svg>
Codebase Browser
chromium