<!DOCTYPE html> <html lang='en'> <head> <title>animate-elem-41-t-manual.svg</title> <meta charset='utf-8'> </head> <body> <h1>Source SVG: animate-elem-41-t-manual.svg</h1> <svg version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!--======================================================================--> <!--= SVG 1.1 2nd Edition Test Case =--> <!--======================================================================--> <!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =--> <!--= Institute of Technology, European Research Consortium for =--> <!--= Informatics and Mathematics (ERCIM), Keio University). =--> <!--= All Rights Reserved. =--> <!--= See http://www.w3.org/Consortium/Legal/. =--> <!--======================================================================--> <title id="test-title">$RCSfile: animate-elem-41-t.svg,v $</title> <defs> <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F"> <font-face-src> <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/> </font-face-src> </font-face> </defs> <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18"> <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 xlink:href="" 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" from="nonzero" 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" from="nonzero" 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 xlink:href="" transform="translate(220, 0)"> <animate attributeName="fill-rule" from="nonzero" 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 xlink:href="" 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 xlink:href="" 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 xlink:href="" 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 xlink:href="" 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 xlink:href="" 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 xlink:href="" 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 xlink:href="" 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"/> </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 xlink:href="" 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 xlink:href="" 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> </g> <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</text> </g> <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> <!-- comment out this watermark once the test is approved --> <!--<g id="draft-watermark"> <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/> <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text> </g>--> </svg> </body> </html>