3.201 cursos gratis
6.235.079 alumnos
Publica tu curso gratis
Busca cursos gratis:
Estás aquí: mailxmail > Cursos de Informática > Internet > SVG: gráficos e interactividad en la Web > SVG: scripting

SVG: gráficos e interactividad en la Web

Autor: Ricardo Borillo
Curso:  4,43/5 4,43/5 (35 opiniones) |4381 alumnos|Fecha publicación: 15/09/2004
Capítulos del curso

Capítulo 8:

 SVG: scripting

Tenemos dos métodos para modificar el contenido de un fichero SVG mediante Scripting:

Considerando el documento como un fichero XML estándar y utilizando DOM para su manipulación.

Considerando el documento como un fichero específico SVG y utlizando el modelo de objetos de SVG para su manipulación.

Funciones de ejemplo para el de DOM.-
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
          "
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
<svg xmlns="
http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "
     width="300" height="300" onload="pinta()">
 
  <script type="text/ecmascript">
    <![CDATA[
       function pinta() {
          var circleNode = svgDocument.createElement("circle");
          circleNode.setAttribute("cx", 300*Math.random());
          circleNode.setAttribute("cy", 300*Math.random());
          circleNode.setAttribute("r", 30);
          circleNode.setAttribute("style", "stroke: none; " +
                                           "opacity: 0.3; " +
                                           "fill: rgb(" + 255*Math.random() + "," +
                                                          255*Math.random() + "," +
                                                          255*Math.random() +  ");");         
          setTimeout("window.pinta()", 300);
         
          document.getElementById("dr").appendChild(circleNode);
       }
    ]]>
  </script>
 
  <g id="dr" />
</svg>

Figure 20. scripting-dom.svg
SVG: scripting


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
          "
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
<svg xmlns="
http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink "
     width="236" height="295">
 
  <script type="text/ecmascript"><![CDATA[
       var drag = false;
       var dx = 0;
       var dy = 0;
       var x = 0;
       var y = 0;
      
       var frame = document.documentElement.getElementById("frame");
       var filtered = document.documentElement.getElementById("filtered");
       var clip = document.documentElement.getElementById("clipRecorte");

       frame.addEventListener("mousedown", mousedown_listener, false);
       frame.addEventListener("mouseup",   mouseup_listener,   false);
       frame.addEventListener("mousemove", mousemove_listener, false);

       function mousedown_listener(evt) {
          drag = true;
          dx = filtered.getAttribute("x") - evt.clientX;
          dy = filtered.getAttribute("y") - evt.clientY;
       }

       function mouseup_listener(evt) {
          drag = false;
          alert('x: ' + filtered.getAttribute("x") + ', ' +
                'y: ' + filtered.getAttribute("y"));
       }

       function mousemove_listener(evt) {
          if (drag) {
              x = evt.clientX + dx;
              y = evt.clientY + dy;

              filtered.setAttribute("x", x);
              filtered.setAttribute("y", y);

              clip.getChildNodes().item(1).setAttribute("d",
                    "M" +      x  + "," +      y  + " " +
                    "L" + (100+x) + "," +      y  + " " +
                    "L" + (100+x) + "," + (100+y) + " " +
                    "L" +      x  + "," + (100+y) + " Z");
          }
       }
     ]]>
  </script>

  <defs>
    <clipPath id="clipRecorte">
      <path d="M0,0 L100,0 L100,100 L0,100 Z" />
    </clipPath>
  </defs>

  <g id="target">
    <image width="236" height="295" xlink:href="wilber-wizard.png" opacity="0.3" />
    <image width="236" height="295" xlink:href="wilber-wizard.png"
           clip-path="url(#clipRecorte)" />

    <g id="frame">
      <rect id="filtered" width="100" height="100" 
            style="fill: red; fill-opacity: 0; stroke: red; stroke-width: 1;
                   shape-rendering: optimizeSpeed;" />
    </g>
  </g>
</svg>

Figure 21. scripting-recorte.svg
SVG: scripting


Funciones de ejemplo para el uso del modelo de objetos de SVG function init().-

{
   transform_list = document.getElementById('all').transform.baseVal;
   svg_element = document.getElementById('all').ownerSVGElement;
}

function Rotate() {
   var xform = document.getElementById('foo').createSVGTransform();
   xform.setRotate(30,50,300);
   var id = svg_element.suspendRedraw(1000);
   transform_list.appendItem(xform);
   svg_element.unsuspendRedraw(id);
}

function Translate() {
   var xform = document.getElementById('foo').createSVGTransform();
   xform.setTranslate(10,-10);
   var id = svg_element.suspendRedraw(1000);
   transform_list.appendItem(xform);
   svg_element.unsuspendRedraw(id); 
   }

function Scalein() {
   var xform = document.getElementById('foo').createSVGTransform();
   xform.setScale(1.5,1.5);
   transform_list.appendItem(xform);
}

function Scaleout() {
   var xform = document.getElementById('foo').createSVGTransform();
   xform.setScale(0.5,0.5);
   var id = svg_element.suspendRedraw(1000);
   transform_list.appendItem(xform);
   svg_element.unsuspendRedraw(id);
}

function DOMTest() {
   var p = document.getElementById('barx').points.getItem(0);
   for (var i=50;i<250;++i) {
        p.x = i;
   }
}

function DOMTest2() {
   var p = document.getElementById('bary').points.getItem(0);
   for (var i=50;i<250;++i) {
        p.y = i;
   }
}

Capítulo siguiente - SMIL
Recibe nuestras novedades
Al presionar "Recibir" estás dándote de alta y aceptas las condiciones legales de mailxmail

Hay 35 opiniones. Opina sobre este curso.

Descarga el PDF gratis

Cursos similares a SVG: gráficos e interactividad en la Web


Cursos Valoración Alumnos Vídeo
Adobe Photoshop
Adobe Photoshop (Ps) es una aplicación que se utiliza para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits. Ph... [18/05/09]
 4,13/5 2.400  
La red
Este es un curso que trata sobre la realización de redes informáticas. Se podrá ver cómo realizar una red, cuál es la definición de red, qué clase de redes hay y cómo ela... [10/01/06]
 2,83/5 3.579  
Crear un ojo en 3ds Max
Con la ayuda de este curso aprenderás a crear un ojo con 3ds Max. e incorporarlo dentro de la cara de una persona. Ya verás como en sólo 15 minutos lo puedes conseguir. É... [19/10/05]
5/5 1.188  


Publicar en   del.icio.us    digg    meneame

¿Qué es mailxmail.com?|ISSN: 1699-4914|Recomiéndanos|Ayuda
Condiciones legales de mailxmail