Darle coordenada y a un elemento svg

imj244 · #1 (**permalink**) 09/10/2012, 02:58

Buenos días.

Tengo varios elementos svg, situados uno debajo de otro (elem2 debajo del elem1, elem3 debajo del elem 4, etc.), a los que tengo que dar, manualmente por javascript su coordenada y:

elem2.y.baseVal.value = -110;

elem3.y.baseVal.value = -224;

elem4.y.baseVal.value = -338;

En vez de dar la coordenada y a mano, me gustaría dárselo de una manera general, pues todos tienen que tener el mismo valor en y que el elem1, y con basebal, tal y como se lo doy, lo que cogen es el valor base de cada elemento como referencia.

A ver si alguien puede ayudarme, muchas gracias.

emprear · #2 (**permalink**) 09/10/2012, 08:23

Podés posicionarlos dandole el top ya sea por css o con javascript
Solo te resta determinar a que elementos
Ejemplo

Código HTML:

Ver original<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
<style type="text/css">
/*<![CDATA[*/
h1{
text-align: center;
}
svg{
border: solid 1px #999;
}
#svgelem{
position: absolute;
top: 0;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
function posicionar(){
var svg = document.getElementById('svgelem_2');
svg.style.position = 'absolute';
svg.style.top = '200px';
}
 
//]]>
</script>
</head>
<body onload="posicionar();">
<h1>HTML5 SVG</h1>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
 
 
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" id="svgelem_2">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Capa 1</title>
  <rect transform="rotate(37.5686, 244, 235.5)" id="svg_1" height="177.392153" width="255.685329" y="146.803932" x="116.157328" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>
</body>
</html>