Javascript DOM How to - Get information from a svg string

Question

We would like to know how to get information from a svg string.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
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;<!-- w ww .j  av a 2s . c  o m-->
var height = tempElement.querySelector('g:nth-child(1) rect').getAttribute('height');
document.writeln(height);

</script>
</head>
<body>
</body>
</html>

The code above is rendered as follows: