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=0; i<elPath_ptos.length; i++) {
var suLetra = elPath_ptos[i].charAt(0);
var xy = elPath_ptos[i].substring(1, elPath_ptos[i].length).split(","); //le quitamos la letra y separamos x de y
arrAdevolver.push( { letra: suLetra, x: parseInt(xy[0],10), y: parseInt(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(ptos, incr_horiz) {
for(var i=0; i<ptos.length; i++) {
ptos[i].x += 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(elPath, ptos) {
var atributoStr = "";
for(var i=0; i<ptos.length; i++) {
atributoStr += ptos[i].letra + ptos[i].x +","+ptos[i].y+" ";
}
elPath.setAttribute("d", atributoStr );
}
/* Añade unos cuantos puntos al array ptos */
function anyadePtos(ptos, nuevosPtos) {
var ultimoPto_x = ptos[ptos.length-1].x;
for(var i=0; i<nuevosPtos.length; i++) {
ptos.push( { letra: "L", x: (ultimoPto_x+distanciaPtosOX*(i+1)), y: nuevosPtos[i] } );
}
}
var elRojo = document.getElementById("elRojo");
var nuevosPtos = [12, 150, 50];
var nodosAeliminar = nuevosPtos.length;
// Obtenemos los puntos
var arrayDePtos = ptosDePathToArray( elRojo );
// Eliminamos los nodos desde el principio que nos interesen
eliminarNnodos(arrayDePtos, nodosAeliminar);
// Corremos horizontalmente la distancia correspondiente
moverHorizPtos(arrayDePtos, -(nodosAeliminar+1)*distanciaPtosOX );
// Añadimos nuevos puntos que queramos
anyadePtos(arrayDePtos, nuevosPtos);
// Aplicamos los cambios al path
setPtosDePathFromArray(elRojo, arrayDePtos);
]]> </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.