加载svg文件(xml)并使用javascript提取特定信息
Load a svg file(xml) and extract specific information using javascript
我正在尝试使用jquery/javascript获得svg文件svg的例子:
<svg width="111" height="123" xmlns="http://www.w3.org/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>
并且使用类似这样的东西从文件
中提取数据 $.get(file_url, function(data) {
var teste=data;
},'xml')// or use text instead of xml
则获取所有元素,如rect或text然后输入像这样的内容(排除里面的' '只是为了知道值来自哪里):
'Element' rect, 'rescale' none, 'move' static
和text(不包括里面的' '):'Element' rect, 'rescale' none, 'move' static, 'text_pos'居中,'id' Actor角色名,' node value' Actor角色
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);
问题发现它没有传递$之外的变量数据。得到
第一个alert(rect2);
给出正确的数据
第二个alert(rect2);
给出未定义
有人知道为什么它没有给出一个全局变量:X已经尝试将变量放在外部,但也不起作用
很抱歉,我忘了更改注释:如果现在是正确的
我是这样加载SVG文件的:
$( 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');
});
我将使用下面的代码:Ajax或JavaScript:根据服务器响应更改样式
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];
所以你现在可以使用jQuery(mySVG)
或纯javascript提取属性
From docs: http://api.jquery.com/jquery.parsexml/
var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "title" );
在我的例子中,svg数据包括
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
所以对我来说,获得SVG是这样完成的:
var xml = "<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/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" );
虽然它被问及'g'元素。运行了一个快速测试,但无法使用您提供的数据获得结果,尽管下面的示例代码应该有所帮助:
var xml = '<?xml version="1.0" standalone="no"?><'!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/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样本数据来自http://www.w3.org/TR/SVG/struct.html#Groups
- 如何使用JavaScript提取此url的一部分
- 使用Node/Javascript提取字符串中的所有占位符
- 无法使用 JavaScript 提取 API 发布数据
- 使用 Javascript 提取复选框的值
- javascript提取句子的各个部分
- 使用 JavaScript 提取 URL 参数
- 使用 JavaScript 提取 IFrame 源代码
- 你知道一个开源的Javascript提取/正则表达式引擎吗?
- 使用 Javascript 提取整个 XML 节点内容
- Javascript - 提取跨度值
- 使用 javascript 提取 json 数组数据
- 使用 javascript 提取并浏览文件夹中.ZIP文件修改时间戳
- 仅使用javascript提取数字
- 使用javascript提取HTML
- 使用Javascript提取字符串中的数字
- 使用Javascript提取外部动态链接
- JavaScript提取并处理数组中的值
- JavaScript:提取电子邮件地址的部分并将其拆分为多个部分
- 使用正则表达式或javascript提取ID的最后一部分
- Javascript提取月份、日期和年份格式