Ver Mensaje Individual
  #4 (permalink)  
Antiguo 31/08/2007, 22:57
Avatar de derkenuke
derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 4 meses
Puntos: 45
Re: javascript y svg

Hola de nuevo.

Cita:
Iniciado por ratamaster
Cita:
Iniciado por derkenuke
El funcionamiento de javascript es parecido en un documento SVG, podemos trabajar por nodos y modificar sus atributos.

He tenido que modificar la etiqueta de apertura <svg> para que FF2 lo renderizase bien, y me he inventado un atributo ID para los elementos PATH, no sé si es correcto, pero funciona.
¿Qué quieres decir con esto? Puede ser que yo te lo haya pasdo mal, no?, las disculpas del caso.
Lo que quiero decir es que podemos trabajar con nodos como si un documento HTML fuera. Es decir, podemos trabajar con document.getElementById() o con document.getElementsByTagName() al parecer...
La etiqueta de apertura de <svg> la he modificado añadiéndole atributos que proponía la especificación. Si no lo hacía el FF me decía que no era un documento válido y no me lo renderizaba.





No sé si cumple tu propósito, lo he documentado más o menos:
Código PHP:
<svg xmlns="http://www.w3.org/2000/svg"
     
xmlns:xlink="http://www.w3.org/1999/xlink"
     
version="1.1"
     
baseProfile="full">
<
g transform="translate(30, 50)">
<
g>
<
path stroke="black" stroke-width="2" d="M0,250 l0,5 l0,-5 l41.6667,0
l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5
l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5
l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5
l41.6667,0 l0,5 l0,-5 l41.6667,0 l0,5 l0,-5 M0,250 l-5,0 l5,0 l0,-25
l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25
l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25 l-5,0 l5,0 l0,-25
l-5,0 l5,0 l0,-25 l-5,0 l5,0"
/>

<
text x="-19" y="272" stroke="black">21:27</text>
<
text x="22.6667" y="272" stroke="black">21:32</text>
<
text x="64.3333" y="272" stroke="black">21:37</text>
<
text x="106" y="272" stroke="black">21:42</text>
<
text x="147.667" y="272" stroke="black">21:47</text>
<
text x="189.333" y="272" stroke="black">21:52</text>
<
text x="231" y="272" stroke="black">21:57</text>
<
text x="277.167" y="272" stroke="black">22:2</text>
<
text x="318.833" y="272" stroke="black">22:7</text>
<
text x="356" y="272" stroke="black">22:12</text>
<
text x="397.667" y="272" stroke="black">22:17</text>
<
text x="439.333" y="272" stroke="black">22:22</text>

<
text x="481" y="272" stroke="black">22:27</text>
<
text x="-17" y="256" stroke="black">0</text>
<
text x="-25" y="231" stroke="black">10</text>
<
text x="-26" y="206" stroke="black">20</text>
<
text x="-26" y="181" stroke="black">30</text>
<
text x="-27" y="156" stroke="black">40</text>
<
text x="-26" y="131" stroke="black">50</text>
<
text x="-26" y="106" stroke="black">60</text>
<
text x="-26" y="81" stroke="black">70</text>
<
text x="-26" y="56" stroke="black">80</text>
<
text x="-26" y="31" stroke="black">90</text>
<
text x="-34" y="6" stroke="black">100</text>
</
g>


<
path id="elRojo" stroke="red" stroke-width="1" fill="none" d="
M0,217.5
L83.3333,50
L125,127.5
L166.667,82.5
L208.333,175
L250,85
L291.667,177.5
L333.333,170
L375,187.5
L416.667,102.5
L458.333,122.5
L500,120"
/>

</
g>


<
script type="text/ecmascript"> <![CDATA[

var 
distanciaPtosOX 41;



// Trabajamos con el rojo
var elRojo document.getElementById("elRojo");


/* Devuelve un array con el conjunto de puntos que tiene un PATH 
    Un punto (un elemento de ese array) es un objeto con las propiedades: letra, x, y.
*/
function ptosDePathToArray(elPath) {
    var 
arrAdevolver = new Array();
    var 
elPath_ptos elPath.getAttribute("d").split(" ");
    
// En elPath_ptos están todos los puntos con el formato Lxx,xx
    
for(var i=0i<elPath_ptos.lengthi++) {    
        var 
suLetra elPath_ptos[i].charAt(0);
        var 
xy elPath_ptos[i].substring(1elPath_ptos[i].length).split(",");        //le quitamos la letra y separamos x de y
        
arrAdevolver.push( { letrasuLetraxparseInt(xy[0],10), yparseInt(xy[1],10) } );
    }
    return 
arrAdevolver;
}

/* Añade la cantidad de incr_horiz a la coordenada x de cada pto en el array ptos */
function moverHorizPtos(ptosincr_horiz) {
    for(var 
i=0i<ptos.lengthi++) {
        
ptos[i].+= incr_horiz;
    }
}

function 
eliminarNnodos(ptos,n) {
    
ptos.splice(0,n);        // eliminamos n elementos del array desde el principio
    
ptos[0].letra "M";    // al parecer la letra del primero tiene que ser M siempre
}

/* Dado un conjunto de puntos los coloca como atributo en el path, haciéndolos visibles */
function setPtosDePathFromArray(elPathptos) {
    var 
atributoStr "";
    for(var 
i=0i<ptos.lengthi++) {
        
atributoStr += ptos[i].letra ptos[i].+","+ptos[i].y+" ";
    }
    
elPath.setAttribute("d"atributoStr );
}



/* Añade unos cuantos puntos al array ptos */
function anyadePtos(ptosnuevosPtos) {
    var 
ultimoPto_x ptos[ptos.length-1].x;
    for(var 
i=0i<nuevosPtos.lengthi++) {
        
ptos.push( { letra"L"x: (ultimoPto_x+distanciaPtosOX*(i+1)), ynuevosPtos[i] } );
    }
}




var 
elRojo document.getElementById("elRojo");
var 
nuevosPtos = [1215050];
var 
nodosAeliminar nuevosPtos.length;

// Obtenemos los puntos
var arrayDePtos ptosDePathToArrayelRojo );
// Eliminamos los nodos desde el principio que nos interesen
eliminarNnodos(arrayDePtosnodosAeliminar);
// Corremos horizontalmente la distancia correspondiente
moverHorizPtos(arrayDePtos, -(nodosAeliminar+1)*distanciaPtosOX );
// Añadimos nuevos puntos que queramos
anyadePtos(arrayDePtosnuevosPtos);
// Aplicamos los cambios al path
setPtosDePathFromArray(elRojoarrayDePtos);





]]> 
</script>


</svg> 

Bueno, creo que tienes más o menos las funciones que necesitas, modifícalas a tu gusto.



Si necesitas más apoyo, aquí estaré.
Un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.