SVG / JavaScript

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>

<?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>

�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;
   }
}