-1

嗨，我有下一个 svg 字符串 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>

为了获得第一个矩形的宽度和高度，我可以使用 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'));

我想找到我尝试过的 .getBoundingClientRect() 或 .getBBox() 相同的用途：

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

但它不起作用。有人知道解决方案吗？如何使用 getBoundingClientRect 和 getBBox 以及我的字符串 str？谢谢

4

1 回答 1

5

jQuery 返回一个 jQuery 对象，您需要实际的 DOM 元素。为此，您可以[0]在选择器之后简单地添加：

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

请注意，要获得尺寸，必须将元素添加到 DOM，它不应该只是一个字符串。

此外，一种更快、更优雅的方法是......

//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 );
于 2013-01-23T20:14:40.253 回答