<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <title>SVG features in Amaya</title>
  <g>
    <g>
      <animateTransform attributeName="transform" attributeType="XML"
                        type="scale" from="1" to="0.1" begin="0s" dur="3s"
                        fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML"
                        type="translate" from="-500,0" to="0,0" begin="0s"
                        dur="3s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML"
                        type="translate" from="0,0" to="-2000,-2000"
                        begin="3s" dur="3s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML"
                        type="skewX" from="0" to="-50" begin="0s" dur="2s"
                        fill="freeze"/>
      <image x="600" id="backgroundImage" xlink:href="amaya.png">
        <desc>Leading the Web to its full potential</desc>
      </image>
    </g>
    <!-- animated letters text -->
    <g>
      <g style="font: 96px helvetica; font-weight: bold; fill: #488B9B;"
        transform="translate(90, 360)">
        <animate attributeName="opacity" attributeType="CSS" from="1" to="0"
                 begin="7s" dur="3s" fill="freeze"/>
        <animateColor attributeName="fill" attributeType="CSS"
                      from="rgb(0,0,255)" to="rgb(128,0,0)" begin="13s"
                      dur="6s" fill="freeze"/>
        <text opacity="0" transform="translate(13,0)">A 
          <animate attributeName="opacity" attributeType="CSS" from="0"
                   to="1" begin="3s" dur="0.5s" fill="freeze"/>
          <animateTransform attributeName="transform" attributeType="XML"
                            type="scale" from="1" to="0.5" begin="3s"
                            dur="0.5s" fill="freeze"/>
        </text>
        <text opacity="0" transform="translate(33,0)">M 
          <animate attributeName="opacity" attributeType="CSS" from="0"
                   to="1" begin="4s" dur="1s" fill="freeze"/>
          <animateTransform attributeName="transform" attributeType="XML"
                            type="scale" from="1" to="0.5" additive="sum"
                            begin="4s" dur="0.5s" fill="freeze"/>
        </text>
        <text opacity="0" transform="translate(60,0)">A 
          <animate attributeName="opacity" attributeType="CSS" from="0"
                   to="1" begin="5s" dur="0.5s" fill="freeze"/>
          <animateTransform attributeName="transform" attributeType="XML"
                            type="scale" from="1" to="0.5" additive="sum"
                            begin="5s" dur="0.5s" fill="freeze"/>
        </text>
        <text opacity="0" transform="translate(80,0)">Y 
          <animate attributeName="opacity" attributeType="CSS" from="0"
                   to="1" begin="6s" dur="0.5s" fill="freeze"/>
          <animateTransform attributeName="transform" attributeType="XML"
                            type="scale" from="1" to="0.5" additive="sum"
                            begin="6s" dur="0.5s" fill="freeze"/>
        </text>
        <text opacity="0" transform=" translate(100,0)">A 
          <animate attributeName="opacity" attributeType="CSS" from="0"
                   to="1" begin="7s" dur="0.5s" fill="freeze"/>
          <animateTransform attributeName="transform" attributeType="XML"
                            type="scale" from="1" to="0.5" additive="sum"
                            begin="7s" dur="0.5s" fill="freeze"/>
        </text>
      </g>
      <!--use transform="translate(90, 360)" xlink:href="#logo">
                          <animateColor attributeName="fill" attributeType="CSS"
                                        from="rgb(0,0,255)" to="rgb(128,0,0)" begin="13s"
                                        dur="6s" fill="freeze"/>
                        </use>
                        <use transform="translate(90, 363)scale(1,-1)skewX(-50)" opacity="0.2"
                             xlink:href="#logo"/-->
    </g>
    <!-- XML document in a foreign object-->
    <g transform="translate(-30, -200)" opacity="0">
      <animate id="test" attributeName="opacity" attributeType="CSS" from="0"
               to="1" begin="10s" dur="1s" fill="freeze"/>
      <animateMotion path="M 0 0 L 50 240" begin="10s" dur="1s"
                     fill="freeze"/>
      <animateMotion path="M240 296q25-100 47 0t47 0t47 0t47 0t47 0z"
                     begin="13s" dur="8s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML"
                        type="scale" from="1" to="0" begin="13s" dur="8s"
                        fill="freeze"/>
      <rect y="0" x="0" width="200px" height="200px"
            style="fill: #95E4FF; stroke: none"/>
      <switch>
        <foreignObject y="-17" x="-5px" width="150px">
          <h2 xmlns="http://www.w3.org/1999/xhtml">XML Document</h2>
        </foreignObject>
      </switch>
      <switch>
        <foreignObject y="20px" x="5px" width="135px">

          <div xmlns="http://www.w3.org/1999/xhtml">
          <p xmlns="http://www.w3.org/1999/xhtml">This document is a document
          with an equation</p>

          <p xmlns="http://www.w3.org/1999/xhtml">here is it <math
          xmlns="http://www.w3.org/1998/Math/MathML">
            <mi>r</mi>
            <mo>=</mo>
            <msqrt>
              <msup>
                <mi>x</mi>
                <mn>2</mn>
              </msup>
              <mo>+</mo>
              <msup>
                <mi>y</mi>
                <mn>2</mn>
              </msup>
            </msqrt>
          </math> displayed inline along with his svg representation</p>

          <p xmlns="http://www.w3.org/1999/xhtml"><svg
               xmlns="http://www.w3.org/2000/svg" width="135px" height="5px">
            <rect y="0" x="0" width="100px" height="5px"
                  style="fill: #FF0000; stroke: #FFFF00; stroke-width: 1px"/>
          </svg>
          </p>
          </div>
        </foreignObject>
      </switch>
    </g>
    <!-- End of the new document-->
    <!-- XML document in a foreign object-->
    <g opacity="0">
      <animate id="test1" attributeName="opacity" attributeType="CSS" from="0"
               to="1" begin="21s" dur="2s" fill="freeze" repeatCount="1"/>
      <animateTransform attributeName="transform" attributeType="XML"
                        type="scale" from="0" to="1" begin="21s" dur="5s"
                        fill="freeze"/>
      <rect y="0" x="-10" width="500px" height="500px"
            style="fill: #95E4FF; stroke: none"/>
      <switch>
        <foreignObject y="0" x="2px" width="500px">

          <div xmlns="http://www.w3.org/1999/xhtml">

          <table style="background-color: lightblue" width="400px">
            <caption></caption>
            <tbody>
              <tr>
                <td>Part of specification</td>
                <td>Implemented</td>
                <td>Not Implemented</td>
                <td>Samples</td>
              </tr>
              <tr>
                <td>Shapes</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Transformation, ViewBox</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>line Caps, round</td>
                <td></td>
                <td>X</td>
                <td></td>
              </tr>
              <tr>
                <td>Gradient</td>
                <td></td>
                <td>X</td>
                <td></td>
              </tr>
              <tr>
                <td>Clippath</td>
                <td></td>
                <td>X</td>
                <td></td>
              </tr>
              <tr>
                <td>Path</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Opacity - Group Opacity</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>SMIL time handling :

                  <p>only begin - dur in second and repeatCount</p>
                </td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Animate (only from to)

                  <p>only ( x, y, width, height, opacity, fill )</p>
                </td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>AnimateColor (only from to)</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>AnimateTransform (without matrix)</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>AnimateMotion</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Foreign Objects (XML, MathML, XHTML)

                  <p>inside SVG (can be transformed, animated)</p>
                </td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Filters</td>
                <td></td>
                <td>X</td>
                <td></td>
              </tr>
              <tr>
                <td>Text (apart on text on path)</td>
                <td>X</td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
          </div>
        </foreignObject>
      </switch>
    </g>
  </g>
</svg>
