third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-78-t.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--======================================================================-->
   3 <!--=  Copyright 2004 World Wide Web Consortium, (Massachusetts          =-->
   4 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   5 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   6 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   7 <!--======================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   8
   9 <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">
  10         <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="NR" desc="Test on the animation of graphic properties and the inheritance of animated graphics properties" status="accepted" version="$Revision: 1.10 $" testname="$RCSfile: animate-elem-78-t.svg,v $">
  11         <OperatorScript>
  12             <Paragraph>
  13                 This test demonstrates how &lt;set&gt; elements change
  14                 graphics properties on a &lt;shape&gt; element. For
  15                 each of the graphics properties being tested, 3
  16                 &lt;set&gt; elements are set. The first &lt;set&gt;
  17                 element acts directly on the &lt;shape&gt; element. The
  18                 &lt;set&gt; element acts on a &lt;g&gt; containing
  19                 children. The third &lt;set&gt; element acts on an &lt;a&gt;
  20                 containing children. In each case the test validates that
  21                 the animated value set on the &lt;g&gt; and &lt;a&gt;
  22                 elements is inherited by the &lt;shape&gt; element.
  23                 All the &lt;set&gt; elements have a begin attribute
  24                 set to 0s with an offset of 1s after end.
  25                 So, the animation will apply 1s after the document is loaded
  26                 and will repeat every 1s after the animation ends.
  27             </Paragraph>
  28             <Paragraph>
  29                 The first &lt;set&gt; validates the fill property, with
  30                 fill set to orange. When applied directly to the &lt;shape&gt;
  31                 element, the &lt;rect&gt; fill value will change to orange
  32                 when it is translated to the right every 1s. When applied
  33                 to the &lt;g&gt; and &lt;a&gt; elements, the &lt;rect&gt;
  34                 inherits the fill value and is orange.
  35             </Paragraph>
  36             <Paragraph>
  37                 The second &lt;set&gt; validates the fill-style property,
  38                 with fill-style set to evenodd. When applied to the
  39                 &lt;shape&gt; element, the &lt;polyline&gt; fill-style is
  40                 changed from nonzero to evenodd. When applied to the
  41                 &lt;g&gt; and &lt;a&gt; elements, the &lt;polyline&gt; inherits
  42                 the evenodd fill-style.
  43             </Paragraph>
  44             <Paragraph>
  45                 the third &lt;set&gt; validates the stroke property.
  46                 In this case fill is set to none. When stroke is applied
  47                 to the &lt;shape&gt; element, the &lt;rect&gt; on the right
  48                 appears with the stroke color. When applied to the &lt;g&gt; and
  49                 &lt;a&gt; elements, the &lt;rect&gt; inherits the stroke property.
  50             </Paragraph>
  51             <Paragraph>
  52                 the fourth &lt;set&gt; validates the stroke-width property,
  53                 with stroke-width set to 4. When stroke-width is applied
  54                 to the &lt;shape&gt; element, the &lt;line&gt; on the right
  55                 has a width of 4. When applied to the &lt;g&gt; and
  56                 &lt;a&gt; elements, the &lt;line&gt; inherits the stroke-width.
  57             </Paragraph>
  58             <Paragraph>
  59                 the fifth &lt;set&gt; validates the stroke-linecap property,
  60                 with stroke-linecap set to round. When stroke-linecap is applied
  61                 to the &lt;shape&gt; element, the &lt;line&gt; stroke-linecap
  62                 value switches from butt to round. When applied to the &lt;g&gt;
  63                 and &lt;a&gt; elements, the &lt;line&gt; inherits the
  64                 square stroke-linecap.
  65             </Paragraph>
  66             <Paragraph>
  67                 the sixth &lt;set&gt; validates the stroke-linejoin property,
  68                 with stroke-linejoin set to bevel. When stroke-linejoin is applied
  69                 to the &lt;shape&gt; element, the &lt;line&gt; stroke-linejoin
  70                 value switches from miter to bevel. When applied to the &lt;g&gt;
  71                 and &lt;a&gt; elements, the &lt;line&gt; inherits the
  72                 bevel stroke-linejoin.
  73             </Paragraph>
  74             <Paragraph>
  75                the seventh &lt;set&gt; validates the stroke-miterlimit property,
  76                 with stroke-miterlimit set to 10. When stroke-miterlimit
  77                 is applied to the &lt;shape&gt; element, the miter-length to
  78                 stroke-width ratio exceeds the miter-limit and the
  79                 &lt;polyline&gt; switches from bevel to miter.When applied
  80                 to the &lt;g&gt; and &lt;a&gt; elements,the &lt;line&gt;
  81                 inherits the stroke-miterlimit.
  82             </Paragraph>
  83             <Paragraph>
  84                 the eighth &lt;set&gt; validates the stroke-dashoffset property,
  85                 with stroke-dashoffset set to 5.5. When stroke-dashoffset is applied
  86                 to the &lt;shape&gt; element, the &lt;line&gt; has a different
  87                 dashing pattern. When applied to the &lt;g&gt; and &lt;a&gt;
  88                 elements, the &lt;line&gt; inherits the property.
  89             </Paragraph>
  90             <Paragraph>
  91                 the ninth &lt;set&gt; validates the display property,
  92                 with display set to none. When display is applied
  93                 to the &lt;shape&gt; element, the &lt;rect&gt; does not
  94                 appear on the right. When applied to the &lt;g&gt; and &lt;a&gt;
  95                 elements, the &lt;line&gt; inherits the display property and
  96                 hence is not seen.
  97             </Paragraph>
  98             <Paragraph>
  99                 the tenth &lt;set&gt; validates the visibility property,
 100                 with visibility set to hidden. When visibility is applied
 101                 to the &lt;shape&gt; element, the &lt;rect&gt; is hidden
 102                 on the right. When applied to the &lt;g&gt; and &lt;a&gt;
 103                 elements, the &lt;line&gt; inherits the visibility property
 104                 and hence is not seen.
 105             </Paragraph>
 106             <Paragraph>
 107                 the eleventh &lt;set&gt; validates the color property,
 108                 with color set to blue. When color is applied to the
 109                 &lt;shape&gt; element, the &lt;rect&gt; on the right
 110                 switches from default color of black to blue. When
 111                 applied to the &lt;g&gt; and &lt;a&gt;
 112                 elements, the &lt;line&gt; inherits the color property.
 113             </Paragraph>
 114         </OperatorScript>
 115     </SVGTestCase>
 116     <title id="test-title">$RCSfile: animate-elem-78-t.svg,v $</title>
 117
 118     <!--======================================================================-->
 119     <!--Content of Test Case follows...                  =====================-->
 120     <!--======================================================================-->
 121     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.10 $</text>
 122     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 123
 124     <text text-anchor="middle" x="240" y="25" font-size="20">graphics</text>
 125
 126     <g transform="translate(80, 75)">
 127
 128         <g transform="translate(30,10)" text-anchor="end" font-size="12">
 129             <text>fill</text>
 130             <text y="20">fill-rule</text>
 131             <text y="40">stroke</text>
 132             <text y="60">stroke-width</text>
 133             <text y="80">stroke-linecap</text>
 134             <text y="100">stroke-linejoin</text>
 135             <text y="120">stroke-miterlimit</text>
 136             <text y="140">stroke-dashoffset</text>
 137             <text y="160">display</text>
 138             <text y="180">visibility</text>
 139             <text y="200">color</text>
 140         </g>
 141
 142         <g id="type" transform="translate(90, -20)" text-anchor="middle" font-size="14">
 143             <text x="20" y="3">&lt;text&gt;</text>
 144             <text x="130" y="3">&lt;g&gt;</text>
 145             <text x="235" y="3">&lt;a&gt;</text>
 146         </g>
 147
 148         <g transform="translate(80,0)" fill="rgb(204,0,102)">
 149              <rect x="10" width="8" height="8" fill="#ccc"/>
 150
 151              <g id="setOne">
 152                 <defs>
 153                 <g id="setOneRef">
 154                 <rect x="10" width="8" height="8" fill="#ccc"/>
 155                 <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
 156                     </g>
 157                 </defs>
 158                 <use xlink:href="#setOneRef"/>
 159                 <use xlink:href="#setOneRef" x="110"/>
 160                 <use xlink:href="#setOneRef" x="220"/>
 161
 162                 <rect x="10" width="8" height="8">
 163                     <set id="firstSet1" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet1.end + 1s" dur="1s"/>
 164                     <animateTransform attributeName="transform" id="firstSet1_1" type="translate" from="30,0" to="30,0" begin="0s; firstSet1_1.end + 1s" dur="1s"/>
 165                 </rect>
 166
 167                 <g transform="translate(110, 0)">
 168                     <set id="firstSet2" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet2.end + 1s" dur="1s"/>
 169                     <rect x="10" width="8" height="8">
 170                          <animateTransform attributeName="transform" id="firstSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; firstSet2_1.end + 1s" dur="1s"/>
 171                     </rect>
 172                 </g>
 173
 174                 <a transform="translate(220, 0)">
 175                     <set id="firstSet3" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet3.end + 1s" dur="1s"/>
 176                     <rect x="10" width="8" height="8">
 177                         <animateTransform attributeName="transform" id="firstSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; firstSet3_1.end + 1s" dur="1s"/>
 178                     </rect>
 179                 </a>
 180
 181             </g>
 182             <g id="setTwo" transform="translate(5,15)" stroke="rgb(204,0,102)">
 183                 <defs>
 184                     <g id="setTwoRef">
 185                         <polyline fill="#ccc" stroke="#ccc" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10">
 186                         </polyline>
 187                         <polyline fill="#ccc" stroke="#ccc" fill-rule="evenodd" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10" transform="translate(30,0)">
 188                         </polyline>
 189                     </g>
 190                 </defs>
 191                 <use xlink:href="#setTwoRef"/>
 192                 <use xlink:href="#setTwoRef" x="110"/>
 193                 <use xlink:href="#setTwoRef" x="220"/>
 194
 195                 <polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
 196                     <set id="secondSet1" attributeName="fill-rule" to="evenodd" begin="0s; secondSet1_1.end + 1s" dur="1s"/>
 197                     <animateTransform attributeName="transform" id="secondSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet1_1.end + 1s" dur="1s"/>
 198                 </polyline>
 199
 200                 <g transform="translate(110, 0)">
 201                     <set id="secondSet2" attributeName="fill-rule" to="evenodd" begin="0s; secondSet2_1.end + 1s" dur="1s"/>
 202                     <polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
 203                         <animateTransform attributeName="transform" id="secondSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet2_1.end + 1s" dur="1s"/>
 204                     </polyline>
 205                 </g>
 206
 207                 <a transform="translate(220, 0)">
 208                     <set id="secondSet3" attributeName="fill-rule" to="evenodd" begin="0s; secondSet3_1.end + 1s" dur="1s"/>
 209                     <polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
 210                         <animateTransform attributeName="transform" id="secondSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet3_1.end + 1s" dur="1s"/>
 211                     </polyline>
 212                 </a>
 213
 214             </g>
 215
 216             <g id="setThree" transform="translate(0,45)" fill="none">
 217                 <defs>
 218                     <g id="setThreeRef">
 219                         <rect x="10" width="8" height="8" fill="#ccc"/>
 220                         <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
 221                     </g>
 222                 </defs>
 223                 <use xlink:href="#setThreeRef"/>
 224                 <use xlink:href="#setThreeRef" x="110"/>
 225                 <use xlink:href="#setThreeRef" x="220"/>
 226
 227                 <rect x="10" width="8" height="8">
 228                     <set id="thirdSet1" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet1.end + 1s" dur="1s"/>
 229                     <animateTransform attributeName="transform" id="thirdSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet1_1.end + 1s" dur="1s"/>
 230                 </rect>
 231
 232                 <g transform="translate(110, 0)">
 233                     <set id="thirdSet2" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet2.end + 1s" dur="1s"/>
 234                     <rect x="10" width="8" height="8">
 235                         <animateTransform attributeName="transform" id="thirdSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet2_1.end + 1s" dur="1s"/>
 236                     </rect>
 237                 </g>
 238
 239                 <a transform="translate(220, 0)">
 240                     <set id="thirdSet3" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet3.end + 1s" dur="1s"/>
 241                     <rect x="10" width="8" height="8">
 242                         <animateTransform attributeName="transform" id="thirdSet3_1" type="translate" from="30, 0"  to="30,0" begin="0s; thirdSet3_1.end + 1s" dur="1s"/>
 243                     </rect>
 244                 </a>
 245             </g>
 246
 247             <g id="setFour" transform="translate(0,60)" stroke="rgb(204,0,102)">
 248                 <defs>
 249                     <g id="setFourRef">
 250                         <line x1="10" y1="8" x2="20" y2="0" stroke="#ccc">
 251                         </line>
 252                         <line x1="10" y1="8" x2="20" y2="0" stroke-width="4" stroke="#ccc" transform="translate(30,0)">
 253                         </line>
 254                     </g>
 255                 </defs>
 256                 <use xlink:href="#setFourRef"/>
 257                 <use xlink:href="#setFourRef" x="110"/>
 258                 <use xlink:href="#setFourRef" x="220"/>
 259
 260                 <line x1="10" y1="8" x2="20" y2="0">
 261                     <set id="fourthSet1" attributeName="stroke-width" to="4" begin="0s; fourthSet1.end + 1s" dur="1s"/>
 262                     <animateTransform attributeName="transform" id="fourthSet1_1" type="translate" from="30, 0"  to="30,0" begin="0s; fourthSet1_1.end + 1s" dur="1s"/>
 263                 </line>
 264
 265                 <g transform="translate(110, 0)">
 266                     <set id="fourthSet2" attributeName="stroke-width" to="4" begin="0s; fourthSet2.end + 1s" dur="1s"/>
 267                     <line x1="10" y1="8" x2="20" y2="0">
 268                         <animateTransform attributeName="transform" id="fourthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet2_1.end + 1s" dur="1s"/>
 269                     </line>
 270                 </g>
 271
 272                 <a transform="translate(220, 0)">
 273                     <set id="fourthSet3" attributeName="stroke-width" to="4" begin="0s; fourthSet3.end + 1s" dur="1s"/>
 274                     <line x1="10" y1="8" x2="20" y2="0">
 275                         <animateTransform attributeName="transform" id="fourthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet3_1.end + 1s" dur="1s"/>
 276                     </line>
 277                 </a>
 278             </g>
 279
 280             <g id="setFive" transform="translate(0,80)" stroke-width="4" stroke="rgb(204,0,102)">
 281                 <defs>
 282                     <g id="setFiveRef">
 283                       <line x1="10" y1="8" x2="20" y2="0" stroke="#ccc">
 284                       </line>
 285                       <line x1="10" y1="8" x2="20" y2="0" stroke-linecap="round" stroke="#ccc" transform="translate(30,0)">
 286                       </line>
 287                     </g>
 288                 </defs>
 289                 <use xlink:href="#setFiveRef"/>
 290                 <use xlink:href="#setFiveRef" x="110"/>
 291                 <use xlink:href="#setFiveRef" x="220"/>
 292
 293                 <line x1="10" y1="8" x2="20" y2="0">
 294                     <set id="fifthSet1" attributeName="stroke-linecap" to="round" begin="0s; fifthSet1.end + 1s" dur="1s"/>
 295                     <animateTransform attributeName="transform" id="fifthSet1_1" type="translate" from="30, 0"  to="30,0" begin="0s; fifthSet1_1.end + 1s" dur="1s"/>
 296                 </line>
 297
 298                 <g transform="translate(110, 0)">
 299                     <set id="fifthSet2" attributeName="stroke-linecap" to="round" begin="0s; fifthSet2.end + 1s" dur="1s"/>
 300                     <line x1="10" y1="8" x2="20" y2="0">
 301                         <animateTransform attributeName="transform" id="fifthSet2_1" type="translate" from="30, 0"  to="30,0" begin="0s; fifthSet2_1.end + 1s" dur="1s"/>
 302                     </line>
 303                 </g>
 304
 305                 <a transform="translate(220, 0)">
 306                     <set id="fifthSet3" attributeName="stroke-linecap" to="round" begin="0s; fifthSet3.end + 1s" dur="1s"/>
 307                     <line x1="10" y1="8" x2="20" y2="0">
 308                         <animateTransform attributeName="transform" id="fifthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet3_1.end + 1s" dur="1s"/>
 309                     </line>
 310                 </a>
 311             </g>
 312
 313             <g id="setSix" transform="translate(5,100)" fill="none" stroke-miterlimit="10" stroke-width="3" stroke="rgb(204,0,102)">
 314                 <defs>
 315                     <g id="setSixRef">
 316                        <polyline stroke="#ccc" points="5,2,20,5,5,8">
 317                        </polyline>
 318                        <polyline stroke="#ccc" points="5,2,20,5,5,8" stroke-linejoin="bevel" transform="translate(30,0)">
 319                        </polyline>
 320                     </g>
 321                 </defs>
 322                 <use xlink:href="#setSixRef"/>
 323                 <use xlink:href="#setSixRef" x="110"/>
 324                 <use xlink:href="#setSixRef" x="220"/>
 325
 326                 <polyline points="5,2,20,5,5,8">
 327                     <set id="sixthSet1" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet1.end + 1s" dur="1s"/>
 328                     <animateTransform attributeName="transform" id="sixthSet1_1" type="translate" from="30, 0"  to="30,0" begin="0s; sixthSet1_1.end + 1s" dur="1s"/>
 329                 </polyline>
 330
 331                 <g transform="translate(110, 0)">
 332                     <set id="sixthSet2" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet2.end + 1s" dur="1s"/>
 333                     <polyline points="5,2,20,5,5,8">
 334                         <animateTransform attributeName="transform" id="sixthSet2_1" type="translate" from="30, 0"  to="30,0" begin="0s; sixthSet2_1.end + 1s" dur="1s"/>
 335                     </polyline>
 336                 </g>
 337
 338                 <a transform="translate(220, 0)">
 339                     <set id="sixthSet3" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet3.end + 1s" dur="1s"/>
 340                    <polyline points="5,2,20,5,5,8">
 341                        <animateTransform attributeName="transform" id="sixthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet3_1.end + 1s" dur="1s"/>
 342                     </polyline>
 343                 </a>
 344             </g>
 345
 346             <g id="setSeven" transform="translate(5,120)" stroke-miterlimit="1" fill="none" stroke-width="3" stroke="rgb(204,0,102)">
 347                 <defs>
 348                     <g id="setSevenRef">
 349                      <polyline points="5,0,20,5,5,10" stroke="#ccc"/>
 350                      <polyline points="5,0,20,5,5,10" stroke="#ccc" stroke-miterlimit="10" transform="translate(30,0)"/>
 351                     </g>
 352                 </defs>
 353                 <use xlink:href="#setSevenRef"/>
 354                 <use xlink:href="#setSevenRef" x="110"/>
 355                 <use xlink:href="#setSevenRef" x="220"/>
 356
 357                 <polyline points="5,0,20,5,5,10">
 358                     <set id="seventhSet1" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet1.end + 1s" dur="1s"/>
 359                     <animateTransform attributeName="transform" id="seventhSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet1_1.end + 1s" dur="1s"/>
 360                 </polyline>
 361
 362                 <g transform="translate(110, 0)">
 363                     <set id="seventhSet2" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet2.end + 1s" dur="1s"/>
 364                     <polyline points="5,0,20,5,5,10">
 365                         <animateTransform attributeName="transform" id="seventhSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet2_1.end + 1s" dur="1s"/>
 366                     </polyline>
 367                 </g>
 368
 369                 <a transform="translate(220, 0)">
 370                     <set id="seventhSet3" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet3.end + 1s" dur="1s"/>
 371                     <polyline points="5,0,20,5,5,10">
 372                         <animateTransform attributeName="transform" id="seventhSet3_1" type="translate" from="30, 0"  to="30,0" begin="0s; seventhSet3_1.end + 1s" dur="1s"/>
 373                     </polyline>
 374                 </a>
 375
 376             </g>
 377
 378             <g id="setEight" transform="translate(-5,145)" stroke-dasharray="3,4,5" stroke-width="3" stroke="rgb(204,0,102)">
 379                 <defs>
 380                     <g id="setEightRef">
 381                     <line x1="0" y1="0" x2="25" y2="0" stroke="#ccc"/>
 382                     <line x1="0" y1="0" x2="25" y2="0" stroke="#ccc" stroke-dashoffset="5.5" transform="translate(40,0)"/>
 383                     </g>
 384                 </defs>
 385                 <use xlink:href="#setEightRef"/>
 386                 <use xlink:href="#setEightRef" x="110"/>
 387                 <use xlink:href="#setEightRef" x="220"/>
 388
 389                 <line x1="0" y1="0" x2="25" y2="0">
 390                     <set id="eighthSet1" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet1.end + 1s" dur="1s"/>
 391                     <animateTransform attributeName="transform" id="eighthSet1_1" type="translate" from="40, 0"  to="40,0" begin="0s; eighthSet1_1.end + 1s" dur="1s"/>
 392                 </line>
 393
 394                 <g transform="translate(110, 0)">
 395                     <set id="eighthSet2" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet2.end + 1s" dur="1s"/>
 396                     <line x1="0" y1="0" x2="25" y2="0">
 397                         <animateTransform attributeName="transform" id="eighthSet2_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet2_1.end + 1s" dur="1s"/>
 398                     </line>
 399                 </g>
 400
 401                 <a transform="translate(220, 0)">
 402                     <set id="eighthSet3" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet3.end + 1s" dur="1s"/>
 403                     <line x1="0" y1="0" x2="25" y2="0">
 404                         <animateTransform attributeName="transform" id="eighthSet3_1" type="translate" from="40, 0"  to="40,0" begin="0s; eighthSet3_1.end + 1s" dur="1s"/>
 405                     </line>
 406                 </a>
 407             </g>
 408
 409             <g id="setNine" transform="translate(0,160)">
 410                 <defs>
 411                     <g id="setNineRef">
 412                         <rect x="10" width="8" height="8" fill="#ccc"/>
 413                         <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
 414                     </g>
 415                 </defs>
 416                 <use xlink:href="#setNineRef"/>
 417                 <use xlink:href="#setNineRef" x="110"/>
 418                 <use xlink:href="#setNineRef" x="220"/>
 419                 <rect x="10" width="8" height="8">
 420                     <set id="ninthSet1" attributeName="display" to="none" begin="0s; ninthSet1.end + 1s" dur="1s"/>
 421                     <animateTransform attributeName="transform" id="ninthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet1_1.end + 1s" dur="1s"/>
 422                 </rect>
 423
 424                 <g transform="translate(110, 0)">
 425                     <set id="ninthSet2" attributeName="display" to="none" begin="0s; ninthSet2.end + 1s" dur="1s"/>
 426                     <rect x="10" width="8" height="8">
 427                         <animateTransform attributeName="transform" id="ninthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet2_1.end + 1s" dur="1s"/>
 428                     </rect>
 429                 </g>
 430
 431                 <a transform="translate(220, 0)">
 432                     <set id="ninthSet3" attributeName="display" to="none" begin="0s; ninthSet3.end + 1s" dur="1s"/>
 433                     <rect x="10" width="8" height="8">
 434                         <animateTransform attributeName="transform" id="ninthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet3_1.end + 1s" dur="1s"/>
 435                     </rect>
 436                 </a>
 437             </g>
 438
 439             <g id="setTen" transform="translate(0,180)">
 440                 <defs>
 441                     <g id="setTenRef">
 442                         <rect x="10" width="8" height="8" fill="#ccc"/>
 443                         <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
 444                     </g>
 445                 </defs>
 446                 <use xlink:href="#setTenRef"/>
 447                 <use xlink:href="#setTenRef" x="110"/>
 448                 <use xlink:href="#setTenRef" x="220"/>
 449
 450                 <rect x="10" width="8" height="8">
 451                     <set id="tenthSet1" attributeName="visibility" to="hidden" begin="0s; tenthSet1.end + 1s" dur="1s"/>
 452                     <animateTransform attributeName="transform" id="tenthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet1_1.end + 1s" dur="1s"/>
 453                 </rect>
 454
 455                 <g transform="translate(110, 0)">
 456                     <set id="tenthSet2" attributeName="visibility" to="hidden" begin="0s; tenthSet2.end + 1s" dur="1s"/>
 457                     <rect x="10" width="8" height="8">
 458                         <animateTransform attributeName="transform" id="tenthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet2_1.end + 1s" dur="1s"/>
 459                     </rect>
 460                 </g>
 461
 462                 <a transform="translate(220, 0)">
 463                     <set id="tenthSet3" attributeName="visibility" to="hidden" begin="0s; tenthSet3.end + 1s" dur="1s"/>
 464                     <rect x="10" width="8" height="8">
 465                         <animateTransform attributeName="transform" id="tenthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet3_1.end + 1s" dur="1s"/>
 466                     </rect>
 467                 </a>
 468             </g>
 469
 470             <g id="setEleven" color="rgb(204,0,102)" transform="translate(0,200)">
 471                 <defs>
 472                     <g id="setElevenRef">
 473                         <rect x="10" width="8" height="8" fill="#ccc"/>
 474                         <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
 475                     </g>
 476                 </defs>
 477                 <use xlink:href="#setElevenRef"/>
 478                 <use xlink:href="#setElevenRef" x="110"/>
 479                 <use xlink:href="#setTenRef" x="220"/>
 480
 481                 <rect x="10" width="8" height="8" fill="currentColor">
 482                     <set id="eleventhSet1" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet1.end + 1s" dur="1s"/>
 483                     <animateTransform attributeName="transform" id="eleventhSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet1_1.end + 1s" dur="1s"/>
 484                 </rect>
 485
 486                 <g transform="translate(110, 0)" fill="currentColor">
 487                     <set id="eleventhSet2" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet2.end + 1s" dur="1s"/>
 488                     <rect x="10" width="8" height="8">
 489                         <animateTransform attributeName="transform" id="eleventhSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet2_1.end + 1s" dur="1s"/>
 490                     </rect>
 491                 </g>
 492
 493                 <a transform="translate(220, 0)" fill="currentColor">
 494                     <set id="eleventhSet3" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet3.end + 1s" dur="1s"/>
 495                     <rect x="10" width="8" height="8">
 496                         <animateTransform attributeName="transform" id="eleventhSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet3_1.end + 1s" dur="1s"/>
 497                     </rect>
 498                 </a>
 499             </g>
 500
 501         </g>
 502
 503     </g>
 504 </svg>