Question

我正在对网页进行ajax调用并返回html，我将html附加到jQuery定义的div。我已经尝试了多种不同的方法来尝试遍历SVG DOM，理想情况下在jQuery中这是我想要做的：

$(div).find('g.pt1').each(function(){
    //do stuff
});

我已经尝试过KeithWood的SVGjQuery插件，但我无法弄明白，我已经尝试按类选择svg元素并在选择g标签时将其设置为我的上下文，我查看了Snap。 SVG，但它一直抛出Snap未定义的错误。任何遍历SVG DOM的帮助？

编辑：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')
    }
})

我将它附加到页面上，然后找到了它的位置：

<div id="chart582u5" style="width:93%;"></div>

应该如此，就像它在普通页面上的情况一样：

<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>

Answer 1

你仍然可以在没有任何插件的情况下在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>

DEMO

Answer 2

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);

Answer 3

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');
        }
    })

Answer 4

尝试使用D3js库。我一直在用它来制作各种各样的东西。效果很好。

是否可以遍历SVG DOM？

4 个答案: