Programación en castellano. SVG / JavaScript programacion gratis

SMIL

SMIL

SMIL permite la incorporacion de animaciones basadas en tiempo dentro de un documento SVG. Realmente, dentro del documento SVG contamos con una serie de apoyos para poder animar cualquiera de elementos que hemos definido. Hay que tener en cuenta que cada animación definida variará los valores de uno de los atributos del elemento durante el periodo especificado (ya esté delimitado por la ejecución de un evento o por un tiempo fijo).

Para asociar una animación podemos:

Definirla a parte y asociarla a través del ID del elemento:

<animate xlink:href="#bubblesrect" attributeName="y"
         begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/>

<animate xlink:href="#bubblesrect" attributeName="y"
         begin="aboutbubbles.click" end="aboutbubbles.click" to="10" fill="freeze"/>

Definirla directamente en el elemento que la necesita:

<rect id="bubbleslabelrectinvis" pointer-events="all" x="272" y="72" width="86" height="24"
      rx="10" ry="10">
  <set attributeName="opacity" attributeType="CSS" to="0.5"
       begin="bubbleslabelrectinvis.click" end="bubblescrossrect.click"/>
</rect>

Ejemplos de animaciones:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="500" height="510" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <style type="text/css">
    #bubbleslabelrectinvis { fill:#f00; stroke: #700; stroke-width: 3; }
    #aboutbubbles { visibility: hidden; }
    .textrect { stroke:#888; stroke-width:2; fill:#eee; }
    .text  { stroke-width:0; font-size:12; font-family:Arial;
             font-weight:300; fill:#444; }
    .cross { stroke:#888; stroke-width:3; stroke-linejoin:round;
             stroke-miterlimit:0; stroke-linecap:round; }
  </style>

  <g id="base">
    <rect id="bubbleslabelrectinvis" pointer-events="all" x="272" y="72" width="86" height="24"
          rx="10" ry="10">
      <set attributeName="opacity" attributeType="CSS" to="0.5"
           begin="bubbleslabelrectinvis.click"
           end="bubblescrossrect.click; bubblescross01.click; bubblescross02.click"/>
    </rect>
  </g>

  <defs>
    <g>
      <animate xlink:href="#bubblesrect" attributeName="y" begin="aboutbubbles.click"
               dur="4s" to="10" fill="freeze"/>
      <animate xlink:href="#bubblescrossrect" attributeName="y" begin="aboutbubbles.click"
               dur="4s" to="20" fill="freeze"/>
      <animate xlink:href="#bubblescross01" attributeName="y1" begin="aboutbubbles.click"
               dur="4s" to="24" fill="freeze"/>
      <animate xlink:href="#bubblescross01" attributeName="y2" begin="aboutbubbles.click"
               dur="4s" to="32" fill="freeze"/>
      <animate xlink:href="#bubblescross02" attributeName="y1" begin="aboutbubbles.click"
               dur="4s" to="32" fill="freeze"/>
      <animate xlink:href="#bubblescross02" attributeName="y2" begin="aboutbubbles.click"
               dur="4s" to="24" fill="freeze"/>
      <animate xlink:href="#bubblesminrect" attributeName="y"  begin="aboutbubbles.click"
               dur="4s" to="20" fill="freeze"/>
      <animate xlink:href="#bubblesminline" attributeName="y1" begin="aboutbubbles.click"
               dur="4s" to="28" fill="freeze"/>
      <animate xlink:href="#bubblesminline" attributeName="y2" begin="aboutbubbles.click"
               dur="4s" to="28" fill="freeze"/>
    </g>
  </defs>

  <g id="aboutbubbles">
    <set attributeName="visibility" attributeType="CSS" to="visible"
         begin="bubbleslabelrectinvis.click" fill="freeze"/>
    <set attributeName="visibility" attributeType="CSS" to="hidden"
         begin="bubblescrossrect.click; bubblescross01.click; bubblescross02.click" fill="freeze"/>

    <rect id="bubblesrect" class="textrect" x="160" y="130" width="220" height="75"
          rx="10" ry="10" />
    <rect id="bubblescrossrect" class="textrect" x="350" y="140" width="16" height="16"
          rx="1" ry="1" />
    <line id="bubblescross01" class="cross" x1="354" y1="152" x2="362" y2="144" />
    <line id="bubblescross02" class="cross" x1="354" y1="144" x2="362" y2="152" />
    <rect id="bubblesminrect" class="textrect" x="326" y="140" width="16" height="16"
          rx="1" ry="1" />
    <line id="bubblesminline" class="cross" x1="330" y1="150" x2="338" y2="150" />

    <rect id="bubblesmaxrect" class="textrect" x="326" y="140" width="0" height="0" rx="1" ry="1">
      <animate attributeName="y" begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/>
    </rect>

    <rect id="bubblesmaxbox" class="textrect" x="329" y="143" width="0" height="0" rx="1" ry="1">
      <animate attributeName="y" begin="aboutbubbles.click" dur="4s" to="10" fill="freeze"/>
    </rect>

    <text id="bubblestext" class="text">
      <tspan id="bubblestext00" x="170" y="158">
        <animate attributeName="y" begin="aboutbubbles.click" dur="4s" to="38" fill="freeze"/>
        Ventana contextual
      </tspan>
    </text>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <animate attributeName="viewBox" begin="zoomIn.click" to="0 0 50 50" dur="12s" fill="freeze"/>
  <g id="zoomIn">
    <rect x="40" y="40" width="20" height="4"/>
    <rect x="48" y="32" width="4" height="20"/>
  </g>
</svg>

<svg viewBox="-400 -200 1200 600">
  <g>
    <circle cx="100" cy="50" r="1000" style="fill:#000"/>
    <circle cx="100" cy="50" r="0" style="fill:#F75">
      <animate attributeName="r" begin="0s" dur="10.8s" from="0" to="1200"/>
    </circle>
    <circle cx="200" cy="100" r="0" style="fill:#FA8">
      <animate attributeName="r" begin="2s" dur="10.8" from="0" to="1200"/>
    </circle>
    <circle cx="300" cy="150" r="0" style="fill:#FCB">
      <animate attributeName="r" begin="3.5s" dur="10.8" from="0" to="1200"/>
    </circle>
    <circle cx="400" cy="200" r="0" style="fill:#FDC">
      <animate attributeName="r" fill="freeze" begin="4.5s" dur="10.8s" from="0" to="1200"/>
    </circle>
    <circle cx="500" cy="250" r="0" style="fill:#FED">
      <animate attributeName="r" fill="freeze" begin="5.25s" dur="10.8s" from="0" to="1200"/>
    </circle>
    <circle cx="600" cy="300" r="0" style="fill:#FEF">
      <animate attributeName="r" fill="freeze" begin="5.75" dur="10.8s" from="0" to="1200"/>
    </circle>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">

  <g id="test-body-content" font-family="Arial" font-size="30">
    <g transform="translate(0, 0)">
      <rect x="60" y="20" width="60" height="210" fill="#dfdfdf"
            stroke="#dfdfdf" stroke-width="1">
        <animate id="largo1" attributeName="width"
                 begin="0s" dur="4s" from="60" to="210" fill="freeze"/>
        <animate id="ancho1" attributeName="height"
                 begin="0s" dur="4s" from="210" to="310" fill="freeze"/>
        <animate id="largo2" attributeName="width"
                 begin="largo1.end" dur="4s" from="210" to="60" fill="freeze"/>
        <animate id="ancho2" attributeName="height"
                 begin="ancho1.end" dur="4s" from="310" to="210" fill="freeze"/>

        <animateMotion id="abajo1" from="0,0" to="80,80"
                       begin="largo2.end" dur="3s" fill="freeze"/>
        <animateMotion id="zigzag1" values="80,80;10,0;0,10"
                       begin="abajo1.end" dur="3s" fill="freeze"/>
        <animateMotion id="arco1" path="M0,10 C0,10 40,40 80,0"
                       begin="zigzag1.end" dur="3s" fill="freeze"/>
      </rect>
      <rect x="60" y="20" width="50" height="20"  fill="#00ff55"
        stroke="#008855" stroke-width="1">
        <animate attributeName="width"
                 begin="0s" dur="4s" from="50" to="200" fill="freeze"/>
        <animate attributeName="height"
                 begin="0s" dur="4s" from="200" to="300" fill="freeze"/>
        <animate attributeName="width"
                 begin="4s" dur="4s" from="200" to="50" fill="freeze"/>
        <animate attributeName="height"
                 begin="4s" dur="4s" from="300" to="200" fill="freeze"/>

        <animateMotion from="0,0" to="80,80" begin="8s" dur="3s" fill="freeze"/>
        <animateMotion values="80,80;10,0;0,10" begin="11s" dur="3s" fill="freeze"/>
        <animateMotion path="M0,10 C0,10 40,40 80,0" begin="14s" dur="3s" fill="freeze"/>
      </rect>
    </g>

    <g>
      <rect x="320" y="100" width="40" height="40" fill="#ffffff">
        <animate id="fadein" attributeName="fill" attributeType="auto"
                 from="#ffffff" to="#ff0000" begin="indefinite" dur="3s" fill="freeze"/>
        <animate id="fadeout" attributeName="fill" attributeType="auto"
                 from="#ff0000" to="#ffffff" begin="indefinite" dur="3s" fill="freeze"/>
      </rect>

      <g id="buttons">
        <a xlink:href="#fadein">
          <rect x="320" y="10" width="60" height="40" fill="green"/>
          <text fill="white" font-size="10" font-weight="bold" x="330" y="20">Oscuro</text>
        </a>
        <a xlink:href="#fadeout">
          <rect x="320" y="50" width="60" height="40" fill="maroon"/>
          <text fill="white" font-size="10" font-weight="bold" x="330" y="60">Claro</text>
        </a>
      </g>
    </g>
  </g>
</svg>