[英]Is it possible to traverse SVG DOM?
I am making an ajax get call to a web page and return the html, I append the html to a jQuery defined div. 我正在使ajax get调用网页并返回html,我将html附加到jQuery定义的div中。 I have tried a multitude of different ways to try to traverse the SVG DOM, ideally in jQuery this is what I would like to do:
我尝试了多种遍历SVG DOM的方法,理想情况下,这是我想在jQuery中做的事情:
$(div).find('g.pt1').each(function(){
//do stuff
});
I have tried KeithWood's SVGjQuery plugin but I can't figure it out, I have tried selecting the svg element by class and setting it as my context when selecting the g tag, I looked into Snap.SVG but it kept throwing an error that Snap was not defined. 我已经尝试过KeithWood的SVGjQuery插件,但是我无法弄清楚,我尝试了按类选择svg元素并将其设置为选择g标签时的上下文,我查看了Snap.SVG,但是它不断抛出一个错误,即Snap未定义。 Any help traversing SVG DOM?
遍历SVG DOM有什么帮助吗?
EDIT: AJAX does not return the SVG tag at all 编辑:AJAX根本不返回SVG标签
$.ajax({
type: "GET",
url: href,
success: function (data) {
var div = document.createElement('div');
div.innerHTML = xhr.responseText;
$(div).find('[id^="chart"] g text').each(function () {
g = this.innerHTML;
alert();
})
$('#a-page').append(div)
alert('passed the find')
}
})
I appended it to the page and went through to find where it is an I get this: 我将其附加到页面上,并通过查找来找到它:
<div id="chart582u5" style="width:93%;"></div>
When it should be this, like how it is on the normal page: 应该是什么时候,就像正常页面上那样:
<div id="chart582u5" style="width:93%;">
<style></style>
<svg class="pzchart" height="260" width="388" viewport="0 0 388 260" viewBox="0 0 388 260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<text>what I want</text>
</g>
</svg>
</div>
You can still do it in jQuery without any plugins: 您仍然可以在jQuery中完成它而无需任何插件:
<div id="container">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<g stroke="green" fill="white" stroke-width="1">
<text x="250" y="150" font-size="55">Hello</text>
<text x="300" y="200" font-size="55">World</text>
</g>
</svg>
</div>
<script>
var a = []
$('#container g text').each(function(){
a.push(this.innerHTML);
});
alert(a.join(','));
</script>
var div = $('<div/>') .attr('id', 'chart582u5') .css('width', '93%'), yourText = 'hello world'; var svgDOM = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) .attr('xmlns', 'http://www.w3.org/2000/svg') .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink') .attr('preserveAspectRatio', 'xMidYMid') .attr('width', 388) .attr('height', 260) .attr('viewBox', '0 0 388 260') .html('<g><text x="50%" y="50%">' + yourText + '</text></g>'); div.append(svgDOM); $('body').append(div);
function GenerateUniqueStrID() {
var CurDate = new Date();
return '<UID>' + CurDate.getTime() + '</UID>';
}
$.ajax({
url: href+'?' + GenerateUniqueStrID(),
dataType: 'xml',
success: function(data) {
console.log(data);
$(data).find("selector").each(function(){
console.log($(this));
/*******************************************
your XMLFile must look like this template for exemple:
<?xml version="1.0" encoding="utf-8"?>
<yourData>
<selector></selector>
<selector2>
<selector></selector>
....
</selector2>
</yourData>
*******************************************
create your elements on the fly
*******************************************/
//})
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("error! "+ textStatus);
},
complete: function(textStatus) {
console.log('completed');
}
})
Try D3js library. 试试D3js库。 I've been using it for all sorts of svg things.
我一直在将它用于各种svg事情。 works great.
效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.