Skip to content Skip to sidebar Skip to footer
Home / Javascript / String / Svg

How To Get Information From A Svg String In Javascript?

Post a Comment
I have a String of a svg drawing. For example my string var has this content: L

Solution 1:

use a xml dom parser.
As stated in other answers, jQuery is a very good solution for manipulating and traversing html/xml : 

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

If you don't want to use 3rd party libs, you could do this in plain javascript, but your svg string should be appended into the 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');

Here's a working demo : http://jsfiddle.net/gion_13/5K5x2/


Solution 2:

Try this?

Include jQuery in your code, and use:

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

Using strings:

var str = "<svg> ... </svg>"
$(str).find("rect").attr("height");

Post a Comment for "How To Get Information From A Svg String In Javascript?"

Menu Halaman Statis

© 2022 - javascript edu