animate-elem-80-t-isvalid.html (12322B)
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <title>animate-elem-80-t-manual.svg</title> 5 <meta charset='utf-8'> 6 </head> 7 <body> 8 <h1>Source SVG: animate-elem-80-t-manual.svg</h1> 9 <svg version="1.1" baseProfile="tiny" id="svg-root" 10 width="100%" height="100%" viewBox="0 0 480 360" 11 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12 <!--======================================================================--> 13 <!--= SVG 1.1 2nd Edition Test Case =--> 14 <!--======================================================================--> 15 <!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =--> 16 <!--= Institute of Technology, European Research Consortium for =--> 17 <!--= Informatics and Mathematics (ERCIM), Keio University). =--> 18 <!--= All Rights Reserved. =--> 19 <!--= See http://www.w3.org/Consortium/Legal/. =--> 20 <!--======================================================================--> 21 22 <title id="test-title">$RCSfile: animate-elem-80-t.svg,v $</title> 23 <defs> 24 <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F"> 25 <font-face-src> 26 <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/> 27 </font-face-src> 28 </font-face> 29 </defs> 30 <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18"> 31 <text text-anchor="middle" x="240" y="25" font-size="16"><animateTransform></text> 32 <defs> 33 <g id="ref" stroke="rgb(192,192,192)" fill="none"> 34 <circle stroke-width="2" r="40"/> 35 <line x1="-45" x2="45"/> 36 <line y1="-45" y2="45"/> 37 </g> 38 </defs> 39 <g transform="translate(0,0)" font-size="14"> 40 <g transform="translate(60,90)"> 41 <use xlink:href="#ref"/> 42 43 <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0)"> 44 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/> 45 </line> 46 47 <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90)"> 48 <set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/> 49 </line> 50 51 <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180)"> 52 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/> 53 </line> 54 55 <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270)"> 56 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/> 57 </line> 58 59 <line x2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)"> 60 <animateTransform attributeName="transform" type="rotate" values="0;360;0" begin="2s" dur="4s"/> 61 </line> 62 63 <text y="60" text-anchor="middle">type=rotate</text> 64 </g> 65 66 <g transform="translate(180,110)"> 67 <line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(0)"> 68 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/> 69 </line> 70 71 <line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(45)"> 72 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/> 73 </line> 74 75 <line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(-45)"> 76 <set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/> 77 </line> 78 79 <line y2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)"> 80 <animateTransform attributeName="transform" type="skewX" values="0;45;-45;0" begin="2s" dur="4s"/> 81 </line> 82 <text y="40" text-anchor="middle">type=skewX</text> 83 </g> 84 85 <g transform="translate(300,90)"> 86 <g transform="translate(15,0)"> 87 <line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(0)"> 88 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/> 89 </line> 90 91 <line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(30)"> 92 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/> 93 </line> 94 95 <line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(-30)"> 96 <set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/> 97 </line> 98 99 <line x2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)"> 100 <animateTransform attributeName="transform" type="skewY" values="0;30;-30;0" begin="2s" dur="4s"/> 101 </line> 102 </g> 103 104 <text y="60" text-anchor="middle">type=skewY</text> 105 </g> 106 107 <g transform="translate(420,90)"> 108 <circle stroke="rgb(192,192,192)" stroke-width="4" r="40" fill="none"> 109 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/> 110 </circle> 111 112 <circle stroke="rgb(192,192,192)" stroke-width="4" r="30" fill="none"> 113 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/> 114 </circle> 115 116 <circle stroke="rgb(192,192,192)" stroke-width="4" r="20" fill="none"> 117 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/> 118 </circle> 119 120 <circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none"> 121 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/> 122 </circle> 123 124 <circle fill="rgb(200,80,80)" r="10" transform="scale(4)"> 125 <animateTransform attributeName="transform" type="scale" values="4,4;3,3;2,2;1,1" begin="2s" dur="3s" fill="freeze"/> 126 </circle> 127 <text y="60" text-anchor="middle">type=scale</text> 128 <text y="75" text-anchor="middle">(sx and sy)</text> 129 </g> 130 131 132 <g transform="translate(20,180)"> 133 <use xlink:href="#ref" x="40" y="40"/> 134 135 <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)"> 136 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/> 137 </line> 138 139 <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)"> 140 <set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/> 141 </line> 142 143 <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)"> 144 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/> 145 </line> 146 147 <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)"> 148 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/> 149 </line> 150 151 <line x1="40" y1="40" x2="80" y2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)"> 152 <animateTransform attributeName="transform" type="rotate" values="0 40 40;360 40 40;0 40 40" begin="2s" dur="4s"/> 153 </line> 154 155 <text y="100" x="40" text-anchor="middle">type=rotate</text> 156 <text y="115" x="40" text-anchor="middle">(with cx/cy)</text> 157 </g> 158 159 <g transform="translate(180,220)"> 160 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" r="10" fill="none"> 161 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/> 162 </circle> 163 164 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" r="10" fill="none"> 165 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/> 166 </circle> 167 168 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none"> 169 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/> 170 </circle> 171 172 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" r="10" fill="none"> 173 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/> 174 </circle> 175 176 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" r="10" fill="none"> 177 <set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/> 178 </circle> 179 180 <circle fill="rgb(200,80,80)" r="6" transform="translate(-40,0)"> 181 <animateTransform attributeName="transform" type="translate" values="-40;-20;0;20;40" begin="2s" dur="4s" fill="freeze"/> 182 </circle> 183 <text y="60" text-anchor="middle">type=translate</text> 184 <text y="75" text-anchor="middle">(tx only)</text> 185 </g> 186 187 <g transform="translate(300,220)"> 188 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" cy="30" r="10" fill="none"> 189 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/> 190 </circle> 191 192 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" cy="15" r="10" fill="none"> 193 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/> 194 </circle> 195 196 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none"> 197 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/> 198 </circle> 199 200 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" cy="-15" r="10" fill="none"> 201 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/> 202 </circle> 203 204 <circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" cy="-30" r="10" fill="none"> 205 <set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/> 206 </circle> 207 208 <circle fill="rgb(200,80,80)" r="6" transform="translate(-40,30)"> 209 <animateTransform attributeName="transform" type="translate" values="-40,30;-20,15;0,0;20,-15;40,-30" begin="2s" dur="4s" fill="freeze"/> 210 </circle> 211 <text y="60" text-anchor="middle">type=translate</text> 212 <text y="75" text-anchor="middle">(tx and ty)</text> 213 </g> 214 215 <g transform="translate(420,220)"> 216 <circle stroke="rgb(192,192,192)" stroke-width="1" r="10" fill="none" transform="scale(4,4)"> 217 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/> 218 </circle> 219 220 <circle stroke="rgb(192,192,192)" stroke-width="1.3333" r="10" fill="none" transform="scale(3,3)"> 221 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/> 222 </circle> 223 224 <circle stroke="rgb(192,192,192)" stroke-width="2" r="10" fill="none" transform="scale(2,2)"> 225 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/> 226 </circle> 227 228 <circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none" transform="scale(1,1)"> 229 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/> 230 </circle> 231 232 <circle fill="rgb(200,80,80)" r="10" transform="scale(4,4)"> 233 <animateTransform attributeName="transform" type="scale" values="4;3;2;1" begin="2s" dur="3s" fill="freeze"/> 234 </circle> 235 <text y="60" text-anchor="middle">type=scale</text> 236 <text y="75" text-anchor="middle">(sx only)</text> 237 </g> 238 </g> 239 </g> 240 <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 241 <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</text> 242 </g> 243 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/> 244 <!-- comment out this watermark once the test is approved --> 245 <!--<g id="draft-watermark"> 246 <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/> 247 <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" 248 text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text> 249 </g>--> 250 </svg> 251 </body> 252 </html>