SVGViewTests/w3c/1.2T/svg/animate-elem-78-t.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml: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" xmlns:xe="http://www.w3.org/2001/xml-events">
  <!--======================================================================-->
  <!--=  Copyright 2008 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/.                          =-->
  <!--======================================================================-->
  <SVGTestCase 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"
    approved="yes"
    version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-78-t.svg,v $"> 
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        This test demonstrates how &lt;set&gt; elements change graphics properties on elements from the 'Basic Shapes'
        chapter. For each of the graphics properties being tested, 3 &lt;set&gt; animations are applied. The first &lt;set&gt;
        element acts directly on  'Basic Shape' elements. The second &lt;set&gt; element acts on a &lt;g&gt; containing
        children. The third &lt;set&gt; element acts on an &lt;a&gt; containing children. In each case the test validates
        that the animated value set on the &lt;g&gt; and &lt;a&gt; elements is inherited by the 'Basic Shape' element. All
        the &lt;set&gt; elements have a begin attribute set to 0s with an offset of 1s after the end. So, the animation will
        apply 1s after the document is loaded and will repeat every 1s after the animation ends.
      </p>
      <p>
        The first &lt;set&gt; validates the fill property, with fill set to orange. When applied directly to the 'Basic
        Shape' element, the &lt;rect&gt; fill value will change to orange when it is translated to the right every 1s.
        When applied to the &lt;g&gt; and &lt;a&gt; elements, the &lt;rect&gt; inherits the fill value and is orange.
      </p>
      <p>
        The second &lt;set&gt; validates the fill-style property, with fill-style set to evenodd. When applied to the
        'Basic Shape' element, the &lt;polyline&gt; fill-style is changed from nonzero to evenodd. When applied to the
        &lt;g&gt; and &lt;a&gt; elements, the &lt;polyline&gt; inherits the evenodd fill-style.
      </p>
      <p>
        The third &lt;set&gt; validates the stroke property. In this case fill is set to none. When stroke is applied
        to the 'Basic Shape' element, the &lt;rect&gt; on the right appears with the stroke color. When applied to the
        &lt;g&gt; and &lt;a&gt; elements, the &lt;rect&gt; inherits the stroke property.
      </p>
      <p>
        The fourth &lt;set&gt; validates the stroke-width property, with stroke-width set to 4. When stroke-width is
        applied to the 'Basic Shape' element, the &lt;line&gt; on the right has a width of 4. When applied to the
        &lt;g&gt; and &lt;a&gt; elements, the &lt;line&gt; inherits the stroke-width.
      </p>
      <p>
        The fifth &lt;set&gt; validates the stroke-linecap property, with stroke-linecap set to round. When
        stroke-linecap is applied to the 'Basic Shape' element, the &lt;line&gt; stroke-linecap value switches from
        butt to round. When applied to the &lt;g&gt; and &lt;a&gt; elements, the &lt;line&gt; inherits the square
        stroke-linecap.
      </p>
      <p>
        The sixth &lt;set&gt; validates the stroke-linejoin property, with stroke-linejoin set to bevel. When
        stroke-linejoin is applied to the 'Basic Shape' element, the &lt;line&gt; stroke-linejoin value switches
        from miter to bevel. When applied to the &lt;g&gt; and &lt;a&gt; elements, the &lt;line&gt; inherits the
        bevel stroke-linejoin.
      </p>
      <p>
        The seventh &lt;set&gt; validates the stroke-miterlimit property, with stroke-miterlimit set to 10. When
        stroke-miterlimit is applied to the 'Basic Shape' element, the miter-length to stroke-width ratio exceeds
        the miter-limit and the &lt;polyline&gt; switches from bevel to miter.When applied to the &lt;g&gt; and
        &lt;a&gt; elements,the &lt;line&gt; inherits the stroke-miterlimit.
      </p>
      <p>
        The eighth &lt;set&gt; validates the stroke-dashoffset property, with stroke-dashoffset set to 5.5. When
        stroke-dashoffset is applied to the 'Basic Shape' element, the &lt;line&gt; has a different dashing
        pattern. When applied to the &lt;g&gt; and &lt;a&gt; elements, the &lt;line&gt; inherits the property.
      </p>
      <p>
        The ninth &lt;set&gt; validates the display property, with display set to none. When display is applied to
        the 'Basic Shape' element, the &lt;rect&gt; does not appear on the right. When applied to the &lt;g&gt; and
        &lt;a&gt; elements, the &lt;line&gt; inherits the display property and hence is not seen.
      </p>
      <p>
        The tenth &lt;set&gt; validates the visibility property, with visibility set to hidden. When visibility is
        applied to the 'Basic Shape' element, the &lt;rect&gt; is hidden on the right. When applied to the
        &lt;g&gt; and &lt;a&gt; elements, the &lt;line&gt; inherits the visibility property and hence is not seen.
      </p>
      <p>
        The eleventh &lt;set&gt; validates the color property, with color set to blue. When color is applied to the
        'Basic Shape' element, the &lt;rect&gt; on the right switches from default color of black to blue. When
        applied to the &lt;g&gt; and &lt;a&gt; elements, the &lt;line&gt; inherits the color property.
      </p>
    </d:OperatorScript> 
  </SVGTestCase> 
  <title xml:id="test-title">$RCSfile: animate-elem-78-t.svg,v $</title> 
  <defs> 
    <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F"> 
      <font-face-src> 
        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii" /> 
      </font-face-src> 
    </font-face> 
  </defs> 
  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <defs> 
      <g xml:id="setOneRef"> 
        <rect x="10" width="8" height="8" fill="#ccc" /> 
        <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" /> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setTwoRef"> 
        <polyline fill="#ccc" stroke="#ccc" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10"> </polyline> 
        <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)"> </polyline> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setThreeRef"> 
        <rect x="10" width="8" height="8" fill="#ccc" /> 
        <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" /> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setFourRef"> 
        <line x1="10" y1="8" x2="20" y2="0" stroke="#ccc"> </line> 
        <line x1="10" y1="8" x2="20" y2="0" stroke-width="4" stroke="#ccc" transform="translate(30,0)"> </line> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setFiveRef"> 
        <line x1="10" y1="8" x2="20" y2="0" stroke="#ccc"> </line> 
        <line x1="10" y1="8" x2="20" y2="0" stroke-linecap="round" stroke="#ccc" transform="translate(30,0)"> </line> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setSixRef"> 
        <polyline stroke="#ccc" points="5,2,20,5,5,8"> </polyline> 
        <polyline stroke="#ccc" points="5,2,20,5,5,8" stroke-linejoin="bevel" transform="translate(30,0)"> </polyline> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setSevenRef"> 
        <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>
    <defs> 
      <g xml:id="setEightRef"> 
        <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>
    <defs> 
      <g xml: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>
    <defs> 
      <g xml:id="setTenRef"> 
        <rect x="10" width="8" height="8" fill="#ccc" /> 
        <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" /> 
      </g> 
    </defs>
    <defs> 
      <g xml:id="setElevenRef"> 
        <rect x="10" width="8" height="8" fill="#ccc" /> 
        <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" /> 
      </g> 
    </defs>
    <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 xml:id="type" transform="translate(90, -20)" text-anchor="middle" font-size="14"> 
        <text x="20" y="3">'Basic Shape'</text> 
        <text x="130" y="3">&lt;g&gt;</text> 
        <text x="235" y="3">&lt;a&gt;</text> 
      </g> 
      <g transform="translate(80,0)" fill="rgb(204,0,102)"> 
        <rect x="10" width="8" height="8" fill="#ccc" /> 
        <g xml:id="setOne">  
          <use xlink:href="#setOneRef" /> 
          <use xlink:href="#setOneRef" x="110" /> 
          <use xlink:href="#setOneRef" x="220" /> 
          <rect x="10" width="8" height="8"> 
            <set xml:id="firstSet1" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="firstSet1_1" type="translate" from="30,0" to="30,0" begin="0s; firstSet1_1.end + 1s" dur="1s" /> 
          </rect> 
          <g transform="translate(110, 0)"> 
            <set xml:id="firstSet2" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet2.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="firstSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; firstSet2_1.end + 1s" dur="1s" /> 
            </rect> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="firstSet3" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet3.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="firstSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; firstSet3_1.end + 1s" dur="1s" /> 
            </rect> 
          </a> 
        </g> 
        <g xml:id="setTwo" transform="translate(5,15)" stroke="rgb(204,0,102)">  
          <use xlink:href="#setTwoRef" /> 
          <use xlink:href="#setTwoRef" x="110" /> 
          <use xlink:href="#setTwoRef" x="220" /> 
          <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"> 
            <set xml:id="secondSet1" attributeName="fill-rule" to="evenodd" begin="0s; secondSet1_1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="secondSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet1_1.end + 1s" dur="1s" /> 
          </polyline> 
          <g transform="translate(110, 0)"> 
            <set xml:id="secondSet2" attributeName="fill-rule" to="evenodd" begin="0s; secondSet2_1.end + 1s" dur="1s" /> 
            <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"> 
              <animateTransform attributeName="transform" xml:id="secondSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet2_1.end + 1s" dur="1s" /> 
            </polyline> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="secondSet3" attributeName="fill-rule" to="evenodd" begin="0s; secondSet3_1.end + 1s" dur="1s" /> 
            <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"> 
              <animateTransform attributeName="transform" xml:id="secondSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet3_1.end + 1s" dur="1s" /> 
            </polyline> 
          </a> 
        </g> 
        <g xml:id="setThree" transform="translate(0,45)" fill="none">  
          <use xlink:href="#setThreeRef" /> 
          <use xlink:href="#setThreeRef" x="110" /> 
          <use xlink:href="#setThreeRef" x="220" /> 
          <rect x="10" width="8" height="8"> 
            <set xml:id="thirdSet1" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="thirdSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet1_1.end + 1s" dur="1s" /> 
          </rect> 
          <g transform="translate(110, 0)"> 
            <set xml:id="thirdSet2" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet2.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="thirdSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet2_1.end + 1s" dur="1s" /> 
            </rect> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="thirdSet3" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet3.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="thirdSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet3_1.end + 1s" dur="1s" /> 
            </rect> 
          </a> 
        </g> 
        <g xml:id="setFour" transform="translate(0,60)" stroke="rgb(204,0,102)">  
          <use xlink:href="#setFourRef" /> 
          <use xlink:href="#setFourRef" x="110" /> 
          <use xlink:href="#setFourRef" x="220" /> 
          <line x1="10" y1="8" x2="20" y2="0"> 
            <set xml:id="fourthSet1" attributeName="stroke-width" to="4" begin="0s; fourthSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="fourthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet1_1.end + 1s" dur="1s" /> 
          </line> 
          <g transform="translate(110, 0)"> 
            <set xml:id="fourthSet2" attributeName="stroke-width" to="4" begin="0s; fourthSet2.end + 1s" dur="1s" /> 
            <line x1="10" y1="8" x2="20" y2="0"> 
              <animateTransform attributeName="transform" xml:id="fourthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet2_1.end + 1s" dur="1s" /> 
            </line> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="fourthSet3" attributeName="stroke-width" to="4" begin="0s; fourthSet3.end + 1s" dur="1s" /> 
            <line x1="10" y1="8" x2="20" y2="0"> 
              <animateTransform attributeName="transform" xml:id="fourthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet3_1.end + 1s" dur="1s" /> 
            </line> 
          </a> 
        </g> 
        <g xml:id="setFive" transform="translate(0,80)" stroke-width="4" stroke="rgb(204,0,102)">  
          <use xlink:href="#setFiveRef" /> 
          <use xlink:href="#setFiveRef" x="110" /> 
          <use xlink:href="#setFiveRef" x="220" /> 
          <line x1="10" y1="8" x2="20" y2="0"> 
            <set xml:id="fifthSet1" attributeName="stroke-linecap" to="round" begin="0s; fifthSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="fifthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet1_1.end + 1s" dur="1s" /> 
          </line> 
          <g transform="translate(110, 0)"> 
            <set xml:id="fifthSet2" attributeName="stroke-linecap" to="round" begin="0s; fifthSet2.end + 1s" dur="1s" /> 
            <line x1="10" y1="8" x2="20" y2="0"> 
              <animateTransform attributeName="transform" xml:id="fifthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet2_1.end + 1s" dur="1s" /> 
            </line> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="fifthSet3" attributeName="stroke-linecap" to="round" begin="0s; fifthSet3.end + 1s" dur="1s" /> 
            <line x1="10" y1="8" x2="20" y2="0"> 
              <animateTransform attributeName="transform" xml:id="fifthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet3_1.end + 1s" dur="1s" /> 
            </line> 
          </a> 
        </g> 
        <g xml:id="setSix" transform="translate(5,100)" fill="none" stroke-miterlimit="10" stroke-width="3" stroke="rgb(204,0,102)">  
          <use xlink:href="#setSixRef" /> 
          <use xlink:href="#setSixRef" x="110" /> 
          <use xlink:href="#setSixRef" x="220" /> 
          <polyline points="5,2,20,5,5,8"> 
            <set xml:id="sixthSet1" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="sixthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet1_1.end + 1s" dur="1s" /> 
          </polyline> 
          <g transform="translate(110, 0)"> 
            <set xml:id="sixthSet2" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet2.end + 1s" dur="1s" /> 
            <polyline points="5,2,20,5,5,8"> 
              <animateTransform attributeName="transform" xml:id="sixthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet2_1.end + 1s" dur="1s" /> 
            </polyline> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="sixthSet3" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet3.end + 1s" dur="1s" /> 
            <polyline points="5,2,20,5,5,8"> 
              <animateTransform attributeName="transform" xml:id="sixthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet3_1.end + 1s" dur="1s" /> 
            </polyline> 
          </a> 
        </g> 
        <g xml:id="setSeven" transform="translate(5,120)" stroke-miterlimit="1" fill="none" stroke-width="3" stroke="rgb(204,0,102)">  
          <use xlink:href="#setSevenRef" /> 
          <use xlink:href="#setSevenRef" x="110" /> 
          <use xlink:href="#setSevenRef" x="220" /> 
          <polyline points="5,0,20,5,5,10"> 
            <set xml:id="seventhSet1" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="seventhSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet1_1.end + 1s" dur="1s" /> 
          </polyline> 
          <g transform="translate(110, 0)"> 
            <set xml:id="seventhSet2" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet2.end + 1s" dur="1s" /> 
            <polyline points="5,0,20,5,5,10"> 
              <animateTransform attributeName="transform" xml:id="seventhSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet2_1.end + 1s" dur="1s" /> 
            </polyline> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="seventhSet3" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet3.end + 1s" dur="1s" /> 
            <polyline points="5,0,20,5,5,10"> 
              <animateTransform attributeName="transform" xml:id="seventhSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet3_1.end + 1s" dur="1s" /> 
            </polyline> 
          </a> 
        </g> 
        <g xml:id="setEight" transform="translate(-5,145)" stroke-dasharray="3,4,5" stroke-width="3" stroke="rgb(204,0,102)">  
          <use xlink:href="#setEightRef" /> 
          <use xlink:href="#setEightRef" x="110" /> 
          <use xlink:href="#setEightRef" x="220" /> 
          <line x1="0" y1="0" x2="25" y2="0"> 
            <set xml:id="eighthSet1" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="eighthSet1_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet1_1.end + 1s" dur="1s" /> 
          </line> 
          <g transform="translate(110, 0)"> 
            <set xml:id="eighthSet2" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet2.end + 1s" dur="1s" /> 
            <line x1="0" y1="0" x2="25" y2="0"> 
              <animateTransform attributeName="transform" xml:id="eighthSet2_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet2_1.end + 1s" dur="1s" /> 
            </line> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="eighthSet3" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet3.end + 1s" dur="1s" /> 
            <line x1="0" y1="0" x2="25" y2="0"> 
              <animateTransform attributeName="transform" xml:id="eighthSet3_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet3_1.end + 1s" dur="1s" /> 
            </line> 
          </a> 
        </g> 
        <g xml:id="setNine" transform="translate(0,160)">  
          <use xlink:href="#setNineRef" /> 
          <use xlink:href="#setNineRef" x="110" /> 
          <use xlink:href="#setNineRef" x="220" /> 
          <rect x="10" width="8" height="8"> 
            <set xml:id="ninthSet1" attributeName="display" to="none" begin="0s; ninthSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="ninthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet1_1.end + 1s" dur="1s" /> 
          </rect> 
          <g transform="translate(110, 0)"> 
            <set xml:id="ninthSet2" attributeName="display" to="none" begin="0s; ninthSet2.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="ninthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet2_1.end + 1s" dur="1s" /> 
            </rect> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="ninthSet3" attributeName="display" to="none" begin="0s; ninthSet3.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="ninthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet3_1.end + 1s" dur="1s" /> 
            </rect> 
          </a> 
        </g> 
        <g xml:id="setTen" transform="translate(0,180)">  
          <use xlink:href="#setTenRef" /> 
          <use xlink:href="#setTenRef" x="110" /> 
          <use xlink:href="#setTenRef" x="220" /> 
          <rect x="10" width="8" height="8"> 
            <set xml:id="tenthSet1" attributeName="visibility" to="hidden" begin="0s; tenthSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="tenthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet1_1.end + 1s" dur="1s" /> 
          </rect> 
          <g transform="translate(110, 0)"> 
            <set xml:id="tenthSet2" attributeName="visibility" to="hidden" begin="0s; tenthSet2.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="tenthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet2_1.end + 1s" dur="1s" /> 
            </rect> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)"> 
            <set xml:id="tenthSet3" attributeName="visibility" to="hidden" begin="0s; tenthSet3.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="tenthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet3_1.end + 1s" dur="1s" /> 
            </rect> 
          </a> 
        </g> 
        <g xml:id="setEleven" color="rgb(204,0,102)" transform="translate(0,200)">  
          <use xlink:href="#setElevenRef" /> 
          <use xlink:href="#setElevenRef" x="110" /> 
          <use xlink:href="#setTenRef" x="220" /> 
          <rect x="10" width="8" height="8" fill="currentColor"> 
            <set xml:id="eleventhSet1" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet1.end + 1s" dur="1s" /> 
            <animateTransform attributeName="transform" xml:id="eleventhSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet1_1.end + 1s" dur="1s" /> 
          </rect> 
          <g transform="translate(110, 0)" fill="currentColor"> 
            <set xml:id="eleventhSet2" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet2.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="eleventhSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet2_1.end + 1s" dur="1s" /> 
            </rect> 
          </g> 
          <a xlink:href="" transform="translate(220, 0)" fill="currentColor"> 
            <set xml:id="eleventhSet3" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet3.end + 1s" dur="1s" /> 
            <rect x="10" width="8" height="8"> 
              <animateTransform attributeName="transform" xml:id="eleventhSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet3_1.end + 1s" dur="1s" /> 
            </rect> 
          </a> 
        </g> 
      </g> 
    </g>
  </g> 
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 
    <text xml:id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</text> 
  </g> 
  <rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000" /> 
  <!-- comment out this watermark once the test is approved --> 
  <!--<g xml: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>