el uso de getBoundingClientRect, getBBox en un svg cadena?

Hola tengo el siguiente svg string str=

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
 <g>
     <title>Layer 1</title>
     <rect id="svg_1" height="152" width="265" y="44" x="91" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
 <g>
     <title>Layer 2</title>
     <rect id="svg_2" height="125" width="151" y="157" x="399" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

Con el fin de obtener el ancho y la altura de la primera rectángulo puedo usar javascript+jquery:

alert("width:"+$(str).find('g:eq(0) rect:eq(0)').attr('width'));
alert("height:"+$(str).find('g:eq(0) rect:eq(0)').attr('height'));

Me gustaría encontrar el mismo usign .getBoundingClientRect() o .getBBox()
He intentado:

alert("height"+$(str).find('g:eq(0) rect:eq(0)').getBoundingClientRect().width);
alert("height"+$(str).find('g:eq(0) rect:eq(0)').getBBox().width);

pero no funciona. Alguien sabe una solución? ¿cómo puedo hacer para usar getBoundingClientRect y getBBox y mi cadena str? gracias

OriginalEl autor anraT | 2013-01-23

1 Kommentar

  1. 4

    jQuery devuelve un objeto jQuery, usted necesita los elemento DOM. Para esto simplemente se puede agregar [0] después de su selector:

    alert("height"+$(str).find('g:eq(0) rect:eq(0)')[0].getBoundingClientRect().width);
    alert("height"+$(str).find('g:eq(0) rect:eq(0)')[0].getBBox().width);

    Tenga en cuenta que para obtener las dimensiones del elemento debe ser añadido a la DOM, no debe ser simplemente una cadena.

    También, un más rápido y de forma más elegante de hacer esto sería…

    //no need to indicate the first element since querySelector already does this;
    var el = str.querySelector('g rect');
    alert( "width: " + el.getBoundingClientRect().width );
    alert( "width: " + el.getBBox().width );
    Hola, Si yo uso: $(‘#idtest’).html(str); var Cuadro=documento.getElementById(‘svg_1’).getBBox(); y <div id=»idtest» class=»sli» style=»visibility:hidden» ></div> funciona. Pero no sé cómo agregar str a la DOM para usar sus últimos consejos….

    OriginalEl autor Duopixel

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea