139 lines
9.0 KiB
XML
139 lines
9.0 KiB
XML
<?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 additive behavior" status="accepted" version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-81-t.svg,v $">
|
|
<OperatorScript>
|
|
|
|
<Paragraph>
|
|
This test validates the operation of the animateTransform's
|
|
additive behavior, as described in the SVG 1.1 specification
|
|
(see
|
|
http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement).
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
The first two rectangles, on the top row, show the effect of the
|
|
additive attribute on animateTransform. The left-most
|
|
animateTransforms have their additive attribute set to replace,
|
|
so the effect of the two transform animation is as if only the
|
|
highest priority one applied because it replaces the underlying
|
|
value. The second animateTransforms (from left to right) have
|
|
their additive attribute set to sum, which means the transforms
|
|
they produce are concatenated. </Paragraph>
|
|
|
|
<Paragraph>
|
|
The last two rectangles, on the top row, show the effect of the
|
|
accumulate attribute on animateTransform. For the left one
|
|
(third on the row, from left to right), the accumulate attribute
|
|
is set to none. There are two repeats for the
|
|
animateTransform. Therefore, the transform goes twice from a
|
|
scale(1,1) to a scale(2,2). For the right-most animateTransform,
|
|
the accumulate attribute is set to sum. There are two repeats
|
|
and the animation goes from scale(1,1) to scale(2,2) for the
|
|
first iteration and then from scale(2,2) to scale(4,4) (because
|
|
the result of the second iteration is concatenated to the
|
|
scale(2,2) result of the previous, first iteration).
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
The rectangles on the bottom row show the combination of
|
|
additive and cumulative behavior. The left rectangle's
|
|
animateTransform accumulate behavior is set to none but its
|
|
additive behavior is set to sum. Therefore, the transform's
|
|
underlying value (skewX(30)) is always pre-concatenated to the
|
|
animateTransform's result, which goes from "skewX(30)
|
|
scale(1,1)" to "skewX(30) scale(2,2)" in each of its two
|
|
iterations. The right rectangle's animateTransform accumulate
|
|
behavior is set to sum and the additive behavior is also set to
|
|
sum. Therefore, the transform's underlying value is always
|
|
pre-concatenated, so is the result of previous animation
|
|
iterations. Consequently, the transform goes from "skewX(30)
|
|
scale(1,1)" to "skewX(30) scale(2,2)" for the first iteration
|
|
and then from "skewX(30) scale(2,2) scale(1,1)" to "skewX(30)
|
|
scale(2,2) scale(2,2)" for the second iteration. </Paragraph>
|
|
|
|
</OperatorScript>
|
|
</SVGTestCase>
|
|
<title id="test-title">$RCSfile: animate-elem-81-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.6 $</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)">
|
|
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="replace" fill="freeze"/>
|
|
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="5s" additive="replace" fill="freeze"/>
|
|
</rect>
|
|
<rect x="-15" y="-15" width="30" height="30" transform="scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
|
|
<text y="60" text-anchor="middle">additive=replace</text>
|
|
</g>
|
|
|
|
<g transform="translate(180,90)">
|
|
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="sum" fill="freeze"/>
|
|
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="5s" additive="sum" fill="freeze"/>
|
|
</rect>
|
|
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30) rotate(90) scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
|
|
<text y="60" text-anchor="middle">additive=sum</text>
|
|
</g>
|
|
|
|
<g transform="translate(300,90)">
|
|
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="none" fill="freeze" additive="replace"/>
|
|
</rect>
|
|
<rect x="-15" y="-15" width="30" height="30" transform="scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
|
|
<text y="60" text-anchor="middle">accumulate=none</text>
|
|
<text y="75" text-anchor="middle">additive=replace</text>
|
|
</g>
|
|
|
|
<g transform="translate(420,90)">
|
|
<rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30)" stroke="gray" stroke-width="2" fill="rgb(230,230,230)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="sum" fill="freeze" additive="replace"/>
|
|
</rect>
|
|
<rect x="-7.5" y="-7.5" width="15" height="15" transform="scale(4,4)" stroke="rgb(255,180,0)" stroke-width="2" fill="none"/>
|
|
<text y="60" text-anchor="middle">accumulate=sum</text>
|
|
<text y="75" text-anchor="middle">additive=replace</text>
|
|
</g>
|
|
|
|
<g transform="translate(300,220)">
|
|
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="none" fill="freeze" additive="sum"/>
|
|
</rect>
|
|
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30) scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
|
|
<text y="60" text-anchor="middle">accumulate=none</text>
|
|
<text y="75" text-anchor="middle">additive=sum</text>
|
|
</g>
|
|
|
|
<g transform="translate(420,220)">
|
|
<rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30)" stroke="gray" stroke-width="2" fill="rgb(230,230,230)">
|
|
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="sum" fill="freeze" additive="sum"/>
|
|
</rect>
|
|
<rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30) scale(4,4)" stroke="rgb(255,180,0)" stroke-width="2" fill="none"/>
|
|
<text y="60" text-anchor="middle">accumulate=sum</text>
|
|
<text y="75" text-anchor="middle">additive=sum</text>
|
|
</g>
|
|
|
|
</g>
|
|
</svg>
|