I am trying to get a svg file using jquery/javascript svg example:
<svg width="111" height="123" xmlns="">
<g>
<title>Layer 1</title>
<rect fill="#ffffff" stroke="#000000" stroke-width="3" x="1.5" y="1.5"width="108.00001" height="119.99999" id="svg_1" rescale="none" move="Static"/>
<text text_pos="midcenter" xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="14" id="Actor Role name" y="68" x="55" stroke-width="0" stroke="#000000" fill="#000000" rescale="none" move="Static">Actor Role</text>
</g>
</svg>
And using something like this to extract the data from a file
$.get(file_url, function(data) {
var teste=data;
},'xml')// or use text instead of xml
then get all the elements like rect or text and say get something like(exclude the inside ' ' just to know where the values e from):
'Element' rect, 'rescale' none, 'move' static
and for text(exclude the inside ' '): 'Element' rect, 'rescale' none, 'move' static, 'text_pos' midcenter ,'id' Actor Role name, 'node value' Actor Role
RESOLVED-PARTIALLY
$.get(file_url, function(data) {
var teste=data; //all data
rect1=$('<g>').append($(teste).find("text").attr("id")).html();
rect2=rect1+"-"+$('<g>').append($(teste).find("text").attr("text_pos")).html();
alert(rect2);
});
alert(rect2);
Issue found it doesnt pass the variable data, outside that $.get
first alert(rect2); gives the correct data
second alert(rect2); gives me undefined
anyone knows why it isn't giving a global variable :X already try making the variable outside but doesn't work also
well sorry for this forgot to change the ent :f now its correct
I am trying to get a svg file using jquery/javascript svg example:
<svg width="111" height="123" xmlns="http://www.w3/2000/svg">
<g>
<title>Layer 1</title>
<rect fill="#ffffff" stroke="#000000" stroke-width="3" x="1.5" y="1.5"width="108.00001" height="119.99999" id="svg_1" rescale="none" move="Static"/>
<text text_pos="midcenter" xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="14" id="Actor Role name" y="68" x="55" stroke-width="0" stroke="#000000" fill="#000000" rescale="none" move="Static">Actor Role</text>
</g>
</svg>
And using something like this to extract the data from a file
$.get(file_url, function(data) {
var teste=data;
},'xml')// or use text instead of xml
then get all the elements like rect or text and say get something like(exclude the inside ' ' just to know where the values e from):
'Element' rect, 'rescale' none, 'move' static
and for text(exclude the inside ' '): 'Element' rect, 'rescale' none, 'move' static, 'text_pos' midcenter ,'id' Actor Role name, 'node value' Actor Role
RESOLVED-PARTIALLY
$.get(file_url, function(data) {
var teste=data; //all data
rect1=$('<g>').append($(teste).find("text").attr("id")).html();
rect2=rect1+"-"+$('<g>').append($(teste).find("text").attr("text_pos")).html();
alert(rect2);
});
alert(rect2);
Issue found it doesnt pass the variable data, outside that $.get
first alert(rect2); gives the correct data
second alert(rect2); gives me undefined
anyone knows why it isn't giving a global variable :X already try making the variable outside but doesn't work also
well sorry for this forgot to change the ent :f now its correct
alert(rect1) in your code, just 2 alert(rect2). It's perfectly normal that the 2nd is undefined since : 1- it's defined in the above function 2- it's defined in an ajax callback (which is... asynchrone)
– Shikiryu
Commented
Apr 10, 2013 at 19:18
This is how I've been loading the SVG file:
$( document ).ready( function() {
$.get("path-to-svg.svg", null, function(data){
var svgNode = $("svg", data);
var docNode = document.adoptNode(svgNode[0]);
var pageNode = $("#element-to-hold-svg");
pageNode.html(docNode);
}, 'xml');
});
I'll use the code found here: Ajax or JavaScript: Changing Style According to Server Response with
var XMLrequest = newXMLHttpRequest(); // new XML request
XMLrequest.open("GET", myURL, false); // URL of the SVG file on server
XMLrequest.send(null); // get the SVG file
var mySVG = XMLrequest.responseXML.getElementsByTagName("svg")[0];
So you can now use jQuery(mySVG) or pure javascript to extract the properties.
From the docs: http://api.jquery./jquery.parsexml/
var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "title" );
In my case the svg data includes
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
So For me getting the SVG was done as so:
var xml = "<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3/2000/svg" version="1.1" width="2" height="2"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 l 1 1"/></svg>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$svg = $xml.find( "svg" );
Though it was asked about the 'g' element. Ran a quick test and was not able to get results with your provided data, regardless the following sample code should help:
var xml = '<?xml version="1.0" standalone="no"?><\!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3/2000/svg" version="1.1" width="5cm" height="5cm"> <desc>Two groups, each of two rectangles</desc> <g id="group1" fill="red"> <rect x="1cm" y="1cm" width="1cm" height="1cm"/> <rect x="3cm" y="1cm" width="1cm" height="1cm"/> </g> <g id="group2" fill="blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm"/> <rect x="3cm" y="3cm" width="1cm" height="1cm"/> </g><\!-- Show outline of canvas using \'rect\' element --> <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm"/></svg>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$g = $xml.find( "g" );
console.log($g);
SVG sample data obtained from http://www.w3/TR/SVG/struct.html#Groups