Foros del Web » Programando para Internet » Javascript »

javascript y svg

 Estas en el tema de javascript y svg en el foro de Javascript en Foros del Web. Hola! Soy nuevo en svg (no tan así en js) y estoy encontrando problemas a la hora de modificar una gráfica Aquí está el código ...
  #1 (permalink)  
Antiguo 31/08/2007, 07:45
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 19 años, 6 meses
Puntos: 0
javascript y svg
Hola!
Soy nuevo en svg (no tan así en js) y estoy encontrando problemas a la hora de modificar una gráfica
Aquí está el código que dibuja los ejes de las y Y de las X, y y tabién hay dos vectores, uno rojo y el otro verde.
Supongamos que solo vemos le rojo, pero luego queremos transformar a esto en el verde, esto significa mover al rojo n veces hacia atras.
¿Cómo puedo hacer esto mediante js? Intenté almacenar las coordenadas del vector dentro de un array para luego modificarlo, pero no he tenido suerte. Estos son los vectores: path stroke="green" y path stroke="red"
Aquí va la gráfica:


Código: 
<svg>
<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 stroke="green" stroke-width="1" fill="none" d="
M0,50
L50,127.5
L83.3333,82.5
L125,175
L166.667,85
L208.333,177.5
L250,170
L291.667,187.5
L333.333,102.5
L375,122.5
L416.667,120"/>

<path 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>
</svg>
__________________
ratamaster
  #2 (permalink)  
Antiguo 31/08/2007, 09:45
Avatar de derkenuke
Colaborador
  
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: javascript y svg
Hola ratamaster:

Hace tiempo trabaje un poco bajo SVG (si me confirmas que IE7 lo implementa por defecto, entonces proseguiré trabajando con él).

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.

Cita:
Iniciado por ratamaster
Supongamos que solo vemos le rojo, pero luego queremos transformar a esto en el verde, esto significa mover al rojo n veces hacia atras.
No sé si te he entendido bien. Si lo que quieres es ocultar el verde se hace tan sencillo como en un documento normal, con el estilo. Luego podemos pasar el PATH rojo a ser de color verde, y finalmente, moverlo horizontalmente las unidades que queramos. Lo he hecho como me has sugerido, con el array.

Tampoco tengo muy claro si se puede incrustar una etiqueta <script> dentro de <svg>... habría que revisar la documentación svg, sólo me la he mirado por encima...


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="elVerde" stroke="green" stroke-width="1" fill="none" d="
M0,50
L50,127.5
L83.3333,82.5
L125,175
L166.667,85
L208.333,177.5
L250,170
L291.667,187.5
L333.333,102.5
L375,122.5
L416.667,120"/>

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

// Ocultamos el verde
document.getElementById("elVerde").style.display = "none";

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

// Lo coloreamos de verde
elRojo.setAttribute("stroke", "green");

// Lo movemos horizontalmente las unidades deseadas
var elRojo_ptos = elRojo.getAttribute("d").split(" ");
// En elRojo_ptos están todos los puntos con el formato Lxx,xx
// Modificaremos la primera coordenada sumandole una variable incr_horiz
var incr_horiz = 20;
for(var i in elRojo_ptos) {
    var suLetra = elRojo_ptos[i].charAt(0);
    var xy = elRojo_ptos[i].substring(1, elRojo_ptos[i].length).split(",");        //le quitamos la letra y separamos x de y
    var nuevaX = parseInt(xy[0],10) + incr_horiz;
    var nuevaXY = suLetra+nuevaX+","+xy[1];
    elRojo_ptos[i] = nuevaXY;
}
// Ahora en elRojo_ptos[i] tenemos los mismos formatos solo que la X se ha modificado en incr_horiz unidades
elRojo.setAttribute("d", elRojo_ptos.join(" ") );

]]> </script>

</svg> 
Si no era ese tu propósito y encuentras dificultades coméntame, seguro que lo podemos solventar.


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.
  #3 (permalink)  
Antiguo 31/08/2007, 10:47
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 19 años, 6 meses
Puntos: 0
Re: javascript y svg
Cita:
Iniciado por derkenuke Ver Mensaje
Hola ratamaster:

Hace tiempo trabaje un poco bajo SVG (si me confirmas que IE7 lo implementa por defecto, entonces proseguiré trabajando con él).
Lamentablemente no, aún no es nativo de ie, pero esperemos que en un futuro muy cercano lo sea, como el caso de flash.

Cita:
Iniciado por derkenuke Ver Mensaje
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.

Cita:
Iniciado por derkenuke Ver Mensaje
No sé si te he entendido bien. Si lo que quieres es ocultar el verde se hace tan sencillo como en un documento normal, con el estilo. Luego podemos pasar el PATH rojo a ser de color verde, y finalmente, moverlo horizontalmente las unidades que queramos. Lo he hecho como me has sugerido, con el array.
Bien lo contaré com más detalle:
Estoy desarrollando una gráfica que se actualiza en tiempo real, tomando datos de una bd, es una mezcla de php-sql, javascript-ajax y svg.
Cuando la gráfica se inicializa, solo podemos ver los ejes (X y Y), y pasado 1 segundo (o lo que tarde el servidor en mandar nuevos datos), el PATH comienza a ser dibujado.
La IDEA PRINCIPAL, es que el svg no se refresque cuando el PATH llegue al último valor del eje de las x. Cuando el PATH llegue a este último punto, se debe correr todo el PAHT n veces hacia la izquierda.
¿Qué significa moverlo a la izquierda y para qué?
Bueno, lo quiero mover para así dar espacio a nuevos valores que serán dibujados a partir del último nodo.
Para lograr esto, tengo que:
1) Borrar N números de nodos, me refiero a los primeros
2) Correr el resto del PATH hasta el inicio del eje de las x dando así espacio para los nuevos nodos.

Mostré este ejemplo del rojo y el verde para mostrar al PATH cuando llega al fin del eje (el rojo), y como debería quedar luego de ser transladado hacia la izquierda. (aquí los transladé como 4 lugares, solo es un ejemplo)

¿Me explico?
Si has logrado hacerlo, por favor compartilo!!!!!!!! jejeje


Cita:
Iniciado por derkenuke Ver Mensaje
Tampoco tengo muy claro si se puede incrustar una etiqueta <script> dentro de <svg>... habría que revisar la documentación svg, sólo me la he mirado por encima...
No necesito hacer esto, manejo todo el svg desde un js incluido en el archivo svg:

Cita:
Iniciado por derkenuke Ver Mensaje
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="elVerde" stroke="green" stroke-width="1" fill="none" d="
M0,50
L50,127.5
L83.3333,82.5
L125,175
L166.667,85
L208.333,177.5
L250,170
L291.667,187.5
L333.333,102.5
L375,122.5
L416.667,120"/>

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

// Ocultamos el verde
document.getElementById("elVerde").style.display = "none";

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

// Lo coloreamos de verde
elRojo.setAttribute("stroke", "green");

// Lo movemos horizontalmente las unidades deseadas
var elRojo_ptos = elRojo.getAttribute("d").split(" ");
// En elRojo_ptos están todos los puntos con el formato Lxx,xx
// Modificaremos la primera coordenada sumandole una variable incr_horiz
var incr_horiz = 20;
for(var i in elRojo_ptos) {
    var suLetra = elRojo_ptos[i].charAt(0);
    var xy = elRojo_ptos[i].substring(1, elRojo_ptos[i].length).split(",");        //le quitamos la letra y separamos x de y
    var nuevaX = parseInt(xy[0],10) + incr_horiz;
    var nuevaXY = suLetra+nuevaX+","+xy[1];
    elRojo_ptos[i] = nuevaXY;
}
// Ahora en elRojo_ptos[i] tenemos los mismos formatos solo que la X se ha modificado en incr_horiz unidades
elRojo.setAttribute("d", elRojo_ptos.join(" ") );

]]> </script>

</svg> 
Si no era ese tu propósito y encuentras dificultades coméntame, seguro que lo podemos solventar.


Un saludo.
__________________
ratamaster
  #4 (permalink)  
Antiguo 31/08/2007, 22:57
Avatar de derkenuke
Colaborador
  
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 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=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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 01/09/2007, 00:19
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 19 años, 6 meses
Puntos: 0
Re: javascript y svg
¡ Muchas gracias por tu ayuda ! Analizaré tus funciones, cualquier cosa escribo nuevamente.
__________________
ratamaster
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:06.