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='<svgwidth="612"height="394"xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rectid="svg_1"height="152"width="265"y="44"x="91"stroke-width="5"stroke="#000000"fill="#FF0000"/></g><g><title>Layer 2</title><rectid="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