SVGViewTests/w3c/1.2T/svg/animate-elem-17-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="AE" owner="JF" desc="Test possible values for 'keyTimes'" status="accepted"
    approved="yes"
    version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-17-t.svg,v $"> 
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>Test 'calcMode'=spline</p>
      <p>
        One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided to help
        show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes.
        The black text and ruler lines help show the size and movement of the rectangle over time.
      </p>
      <p>
        This animation shows calcMode="spline". Between time 4 seconds and 8 seconds, the animation displays an
        ease-in/ease-out approach instead of a constant linear approach which would have been the case if calcMode had
        been linear instead.
      </p>
    </d:OperatorScript> 
  </SVGTestCase> 
  <title xml:id="test-title">$RCSfile: animate-elem-17-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">
    <text fill="red" font-size="40" x="3" y="45">calcMode="spline"</text>
    <text fill="red" font-size="40" x="3" y="100">keyTimes="0;.25;.5;1"</text>
    <g xml:space="preserve" font-family="Arial" font-size="13.5" stroke-width="3"> 
      <g transform="translate(150,140)"> 
        <text font-size="36" x="-140" y="140">Time (s):</text> 
        <text font-size="36" x="290" y="140">0</text> 
        <line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000" /> 
        <text font-size="36" x="245" y="140">2</text> 
        <line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000" /> 
        <text font-size="36" x="170" y="140">4</text> 
        <line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000" /> 
        <text font-size="36" x="20" y="140">8</text> 
        <line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000" /> 
        <rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4"> 
          <animate attributeName="width" calcMode="spline" values="300;255;180;30" keyTimes="0;.25;.5;1" keySplines="0,0,1,1;0,0,1,1;1,0,0,1" begin="0s" dur="8s" fill="freeze" /> 
        </rect> 
      </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>