Trabajando con elementos del polígono SVG

Question

Estoy tratando de trabajar con un polígono SVG y javascript. Puedo crear un polígono y establecer su lista de puntos inicial de la siguiente manera:

var polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon'); 
polygon.setAttribute("points", "0,0 100,100 200,200"); 

ahora ¿qué hago si quiero modificar el segundo punto (100,100)? En este momento, básicamente estoy reconstruyendo toda la cadena nuevamente. ¿Pero podemos abordar "polígono.puntos" como una matriz de alguna manera, o es realmente una simple cadena simple? Esto puede funcionar bien para polígonos muy simples, pero si mi polígono finalmente tiene cientos de pares de puntos, odiaría reconstruir todo el atributo de "puntos" como una cadena cada vez que quiero modificar un solo elemento.

Gracias

Answer 1

hay manera de evitarlo, me temo. Tienes que reconstruir la cadena de nuevo. Pero no es difícil para envolver todo el asunto en un objeto, algo así como:

function Polygon() { 
    var pointList = []; 
    this.node = document.createElementNS('http://www.w3.org/2000/svg','polygon'); 
    function build (arg) { 
     var res = []; 
     for (var i=0,l=arg.length;i<l;i++) { 
      res.push(arg[i].join(',')); 
     } 
     return res.join(' '); 
    } 
    this.attribute = function (key,val) { 
     if (val === undefined) return node.getAttribute(key); 
     node.setAttribute(key,val); 
    } 
    this.getPoint = function (i) {return pointList[i]} 
    this.setPoint = function (i,x,y) { 
     pointList[i] = [x,y]; 
     this.attribute('points',build(pointList)); 
    } 
    this.points = function() { 
     for (var i=0,l=arguments.length;i<l;i+=2) { 
      pointList.push([arguments[i],arguments[i+1]]); 
     } 
     this.attribute('points',build(pointList)); 
    } 
    // initialize 'points': 
    this.points.apply(this,arguments); 
} 

var polygon = new Polygon(0,0, 100,100, 200,200); 
polygon.setPoint(0, 50,10); // set point and automatically re-build points 
polygon.points(50,50, 50,100, 200,100); // set everything 
polygon.node; // refer to the actual SVG element 

* no es la mejor aplicación, pero se entiende la idea.

Answer 2

Es necesario utilizar setAttributeNS. Es probable que desee almacenar en caché ese espacio de nombres en una variable en alguna parte para que no tenga que seguir tipeando.

Answer 3

Es necesario configurar todos los puntos a la vez, el rendimiento es bastante sólido, lo que es posible que desee hacer es administrar la matriz exterior y fusionarla en el setAttribute llama

Answer 4

Se puede acceder a los valores de los puntos individuales utilizando el DOM SVG:

var p = polygon.points.getItem(1); 
p.x = 150; 
p.y = 300; 

(Asumiendo que su UA implementa esta interfaz.) Ver SVGPolygonElement, SVGAnimatedPoints, SVGPointList y SVGPoint.

Sin embargo, el uso de estas interfaces SVG DOM (al menos para mí en Batik, en el que hago la mayoría de mis cosas SVG) a menudo no es más rápido que simplemente actualizar el atributo con manipulación de cadenas.