2

我有一个 svg 绘图的字符串。例如我的字符串 var 有这个内容：

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

有没有简单的方法来获取信息？例如，获得矩形高度的最佳方法是什么？如何从第 2 层中仅选择矩形的高度？感谢你的回答

4

2 回答 2

1

试试这个？

在您的代码中包含 jQuery，并使用：

$("svg").find("rect").attr("height");

使用字符串：

var str = "<svg> ... </svg>"
$(str).find("rect").attr("height");
于 2012-12-28T14:13:49.277 回答
1

使用 xml dom 解析器。
如其他答案所述，jQuery 是一个非常好的操作和遍历 html/xml 的解决方案： 

 $(svgString).find('g:eq(1) rect').attr('height');

如果您不想使用 3rd 方库，您可以在纯 javascript 中执行此操作，但您的svg 字符串应附加到 dom 中： 

var svgString = a='<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>',
    tempElement = document.createElement('div');

tempElement.innerHTML = svgString;
var height = tempElement.querySelector('g:nth-child(1) rect').getAttribute('height');

这是一个工作演示：http: //jsfiddle.net/gion_13/5K5x2/

于 2012-12-28T15:04:29.707 回答