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.