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