| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- =====================================================================--> |
| <!-- animate-elem-41-t.svg --> |
| <!-- --> |
| <!-- Graphics properties animation with the animate element. --> |
| <!-- --> |
| <!-- Author : [author] --> |
| <!-- =====================================================================--><!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="Animation of the various graphics properties with the animate element." status="accepted" version="$Revision: 1.9 $" testname="$RCSfile: animate-elem-41-t.svg,v $"> |
| <OperatorScript> |
| <Paragraph> |
| This test validates the operation of the animate element on the various graphics |
| properties. This test is very similar to animate-elem-78-t which uses the set element |
| instead of the animate element to modify graphics properties. |
| </Paragraph> |
| |
| <Paragraph> |
| For each graphics properties, there are three tests. One animates the graphics |
| property directly on an element (such as a rect or a line) which uses the |
| property. The other two tests apply the animation on a container element (g and |
| a), and validate that the animated property is inherited by elements which |
| are child of the container. |
| </Paragraph> |
| |
| <Paragraph> |
| For each animation test, the element on which the animation is applied is also |
| translated by an animation so that the various states of the animation can |
| be checked more easily. In most tests, there is a gray reference marker which shows |
| the expected animation state at the begining of the animation, mid-way, or at the |
| end of the animation. |
| </Paragraph> |
| |
| <Paragraph> |
| The following animations should show continuous changes: fill, stroke, |
| stroke-width, stroke-miterlimit, stroke-dashoffset and color. Note that |
| visually, stroke-miterlimit shows a sharp transition, but that is because |
| the miter is cut off when the animated miter limit reaches the test sharp |
| angle's miter value. The stroke-miterlimit value is changed continously |
| but that is not visible in this test. |
| </Paragraph> |
| |
| <Paragraph> |
| The following animations have a discrete behavior: fill-rule, stroke-linecap, |
| stroke-linejoin, display and visibility. |
| </Paragraph> |
| </OperatorScript> |
| </SVGTestCase> |
| <text text-anchor="middle" x="240" y="25" font-size="20">graphics</text> |
| |
| <g transform="translate(80, 75)"> |
| |
| <g transform="translate(30,10)" text-anchor="end" font-size="12"> |
| <text>fill</text> |
| <text y="20">fill-rule</text> |
| <text y="40">stroke</text> |
| <text y="60">stroke-width</text> |
| <text y="80">stroke-linecap</text> |
| <text y="100">stroke-linejoin</text> |
| <text y="120">stroke-miterlimit</text> |
| <text y="140">stroke-dashoffset</text> |
| <text y="160">display</text> |
| <text y="180">visibility</text> |
| <text y="200">color</text> |
| </g> |
| |
| <g id="type" transform="translate(90, -20)" text-anchor="middle" font-size="14"> |
| <text x="20" y="3">element</text> |
| <text x="130" y="3"><g></text> |
| <text x="235" y="3"><a></text> |
| </g> |
| |
| <g transform="translate(80,0)" fill="rgb(204,0,102)"> |
| <g id="setZero"> |
| <defs> |
| <g id="animateZeroRef"> |
| <rect x="10" y="-6" width="8" height="4" fill="rgb(204,0,102)"/> |
| <rect x="10" y="-6" width="8" height="4" fill="rgb(230,82,51)" transform="translate(15,0)"/> |
| <rect x="10" y="-6" width="8" height="4" fill="rgb(255,165,0)" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#animateZeroRef"/> |
| <use xlink:href="#animateZeroRef" x="110"/> |
| <use xlink:href="#animateZeroRef" x="220"/> |
| |
| <rect x="10" width="8" height="8" fill="rgb(204,0,102)"> |
| <animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/> |
| <animate attributeName="x" to="40" dur="3s" fill="freeze"/> |
| </rect> |
| |
| <g transform="translate(110, 0)"> |
| <rect x="10" width="8" height="8"/> |
| <animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <rect x="10" width="8" height="8"/> |
| <animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </a> |
| |
| </g> |
| |
| <g id="setOne" transform="translate(5,15)" stroke="rgb(204,0,102)"> |
| <defs> |
| <g id="setOneRef" fill="#ccc" stroke="none"> |
| <polyline stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10"/> |
| <polyline fill-rule="evenodd" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#setOneRef"/> |
| <use xlink:href="#setOneRef" x="110"/> |
| <use xlink:href="#setOneRef" x="220"/> |
| |
| <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"> |
| <animate attributeName="fill-rule" to="evenodd" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </polyline> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="fill-rule" to="evenodd" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="fill-rule" to="evenodd" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"/> |
| </a> |
| |
| </g> |
| |
| <g id="setTwo" transform="translate(0,45)" fill="none"> |
| <defs> |
| <g id="setTwoRef" fill="none" stroke-width="4"> |
| <rect x="10" width="8" height="8" stroke="rgb(204,0,102)"/> |
| <rect x="10" width="8" height="8" transform="translate(15,0)" stroke="rgb(230,82,51)"/> |
| <rect x="10" width="8" height="8" transform="translate(30,0)" stroke="rgb(255,165,0)"/> |
| |
| </g> |
| </defs> |
| <use xlink:href="#setTwoRef"/> |
| <use xlink:href="#setTwoRef" x="110"/> |
| <use xlink:href="#setTwoRef" x="220"/> |
| |
| <rect x="10" width="8" height="8" stroke-width="3"> |
| <animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </rect> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8" stroke-width="3"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8" stroke-width="3"/> |
| </a> |
| </g> |
| |
| <g id="setThree" transform="translate(0,60)"> |
| <defs> |
| <g id="setThreeRef"> |
| <line x1="10" y1="3" x2="20" y2="3" stroke-width="1" stroke="gray"/> |
| <line x1="10" y1="3" x2="20" y2="3" stroke-width="5" stroke="gray" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| |
| <use xlink:href="#setThreeRef"/> |
| <use xlink:href="#setThreeRef" x="110"/> |
| <use xlink:href="#setThreeRef" x="220"/> |
| |
| <line x1="10" y1="8" x2="20" y2="8" stroke="gray"> |
| <animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </line> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <line x1="10" y1="8" x2="20" y2="8" stroke="gray"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <line x1="10" y1="8" x2="20" y2="8" stroke="gray"/> |
| </a> |
| </g> |
| |
| <g id="setFour" transform="translate(0,80)" stroke-width="4" stroke="rgb(204,0,102)"> |
| <defs> |
| <g id="setFourRef" stroke-width="12"> |
| <line x1="10" y1="8" x2="12" y2="8" stroke="#ccc"/> |
| <line x1="10" y1="8" x2="12" y2="8" stroke-linecap="round" stroke="#ccc" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#setFourRef"/> |
| <use xlink:href="#setFourRef" x="110"/> |
| <use xlink:href="#setFourRef" x="220"/> |
| |
| <line x1="10" y1="8" x2="12" y2="8" stroke-width="12"> |
| <animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </line> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <line x1="10" y1="8" x2="12" y2="8" stroke-width="12"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <line x1="10" y1="8" x2="12" y2="8" stroke-width="12"/> |
| </a> |
| </g> |
| |
| <g id="setFive" transform="translate(5,100)" fill="none" stroke-miterlimit="10" stroke-width="3" stroke="rgb(204,0,102)"> |
| <defs> |
| <g id="setFiveRef"> |
| <polyline stroke="#ccc" points="5,2,20,5,5,8"/> |
| <polyline stroke="#ccc" points="5,2,20,5,5,8" stroke-linejoin="bevel" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#setFiveRef"/> |
| <use xlink:href="#setFiveRef" x="110"/> |
| <use xlink:href="#setFiveRef" x="220"/> |
| |
| <polyline points="5,2,20,5,5,8"> |
| <animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </polyline> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <polyline points="5,2,20,5,5,8"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <polyline points="5,2,20,5,5,8"/> |
| </a> |
| </g> |
| |
| <g id="setSix" transform="translate(5,120)" stroke-miterlimit="1" fill="none" stroke-width="3" stroke="rgb(204,0,102)"> |
| <defs> |
| <g id="setSixRef"> |
| <polyline points="5,0,20,5,5,10" stroke="#ccc"/> |
| <polyline points="5,0,20,5,5,10" stroke="#ccc" stroke-miterlimit="10" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#setSixRef"/> |
| <use xlink:href="#setSixRef" x="110"/> |
| <use xlink:href="#setSixRef" x="220"/> |
| |
| <polyline points="5,0,20,5,5,10"> |
| <animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </polyline> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <polyline points="5,0,20,5,5,10"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <polyline points="5,0,20,5,5,10"/> |
| </a> |
| |
| </g> |
| |
| <g id="setSeven" transform="translate(-5,145)" stroke-dasharray="3,4,5" stroke-width="3" stroke="rgb(204,0,102)"> |
| <defs> |
| <g id="setSevenRef"> |
| <line x1="0" y1="0" x2="25" y2="0" stroke="#ccc"/> |
| <line x1="0" y1="0" x2="25" y2="0" stroke="#ccc" stroke-dashoffset="5.5" transform="translate(40,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#setSevenRef"/> |
| <use xlink:href="#setSevenRef" x="110"/> |
| <use xlink:href="#setSevenRef" x="220"/> |
| |
| <line x1="0" y1="0" x2="25" y2="0"> |
| <animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/> |
| </line> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/> |
| <line x1="0" y1="0" x2="25" y2="0"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/> |
| <line x1="0" y1="0" x2="25" y2="0"/> |
| </a> |
| </g> |
| |
| <g id="setEight" transform="translate(0,160)"> |
| <defs> |
| <g id="setEightRef"> |
| <rect x="10" width="8" height="8" fill="#ccc"/> |
| <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" display="none"/> |
| </g> |
| </defs> |
| <use xlink:href="#setEightRef"/> |
| <use xlink:href="#setEightRef" x="110"/> |
| <use xlink:href="#setEightRef" x="220"/> |
| <rect x="10" width="8" height="8"> |
| <animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </rect> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8"/> |
| </a> |
| </g> |
| |
| <g id="setNine" transform="translate(0,180)"> |
| <defs> |
| <g id="setNineRef"> |
| <rect x="10" width="8" height="8" fill="#ccc"/> |
| <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#setNineRef"/> |
| <use xlink:href="#setNineRef" x="110"/> |
| <use xlink:href="#setNineRef" x="220"/> |
| |
| <rect x="10" width="8" height="8"> |
| <animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </rect> |
| |
| <g transform="translate(110, 0)"> |
| <animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8"/> |
| </g> |
| |
| <a transform="translate(220, 0)"> |
| <animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8"/> |
| </a> |
| </g> |
| |
| <g id="setTen" color="rgb(204,0,102)" transform="translate(0,200)"> |
| <defs> |
| <g id="animateTenRef"> |
| <rect x="10" y="-6" width="8" height="4" fill="rgb(204,0,102)"/> |
| <rect x="10" y="-6" width="8" height="4" fill="rgb(230,82,51)" transform="translate(15,0)"/> |
| <rect x="10" y="-6" width="8" height="4" fill="rgb(255,165,0)" transform="translate(30,0)"/> |
| </g> |
| </defs> |
| <use xlink:href="#animateTenRef"/> |
| <use xlink:href="#animateTenRef" x="110"/> |
| <use xlink:href="#animateTenRef" x="220"/> |
| |
| <rect x="10" width="8" height="8" fill="currentColor"> |
| <animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| </rect> |
| |
| <g transform="translate(110, 0)" fill="currentColor"> |
| <animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8"/> |
| </g> |
| |
| <a transform="translate(220, 0)" fill="currentColor"> |
| <animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/> |
| <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/> |
| <rect x="10" width="8" height="8"/> |
| </a> |
| </g> |
| |
| </g> |
| |
| </g> |
| <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.9 $</text> |
| <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> |
| </svg> |
