jQuery добавление в AJAX загруженную проблему SVG - PullRequest
Новая
       19

jQuery добавление в AJAX загруженную проблему SVG

7 голосов
/ 23 июля 2011

Я успешно загружаю через AJAX некоторые svg из внешнего файла: 

$("#svg").load(svgUrl + " svg", function() {  
    // do stuff  
});

Мой HTML выглядит так: 

<div id="svg" ...>
    <svg ...>
        ...
    </svg>
</div>

Я вижу графику очень хорошо.Теперь я хочу добавить некоторые дополнительные элементы SVG в загруженный SVG.Я изменил свой сценарий на: 

$("#svg").load(svgUrl + " svg", function() {  
    $("svg").append("<g id='compass'></g>");  
    // do stuff  
});

По некоторым причинам добавленный элемент отображается как скрытый в firebug, и независимо от того, какой xml я поместил в него, я не вижу его на своей веб-странице.1011 * Обновление:
Благодаря эхо-поток я смог добавить в свой SVG.Теперь, если я пытаюсь загрузить компас SVG из другого файла XML, он не появляется в моем DOM.На данный момент мой код выглядит следующим образом: 

$("#svg").load(obj.svgUrl + " svg", function() {
    var svgns = "http://www.w3.org/2000/svg";
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    $("#compass").load("files/svg/compass.xml");
});

Если я смотрю в консоли в firebug, я вижу, что результат AJAX-запроса на разметку компаса успешен, но пуст.

Ответы [ 3 ]

17 голосов
/ 23 июля 2011

jQuery на самом деле не создан, чтобы знать о пространствах имен XML, поэтому строка "<g id='compass'></g>", вероятно, анализируется так, что сгенерированные узлы DOM находятся в пространстве имен по умолчанию, а не в пространстве имен SVG. Вы можете решить эту проблему, используя обычный DOM для создания узлов. Это будет выглядеть следующим образом: 

svgns = "http://www.w3.org/2000/svg"
$("#svg").load(svgUrl + " svg", function() {  
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    //do stuff
});

Если вам нужно создать более сложные структуры, я бы порекомендовал взглянуть на библиотеку jquery-svg , которая имеет более чистый API для генерации SVG DOM.

Обновлено

Я неправильно понял, что вы пытаетесь загрузить документ SVG и добавить его в свой HTML-документ хоста - вместо этого я подумал, что вы пытаетесь сгенерировать SVG с использованием скрипта. Чтобы решить вашу проблему, я бы рекомендовал сделать следующее (не проверено, но должно работать): 

//get the SVG document using XMLHTTPRequest
$.get(svgUrl + " svg",
function(svgDoc){
  //import contents of the svg document into this document
  var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);
  //append the imported SVG root element to the appropriate HTML element
  $("#svg").append(importedSVGRootElement);
},
"xml");
0 голосов
/ 22 декабря 2014

Я заставил это работать так. 

                    $.ajax({
                            url: url,
                            data: {data:tosendAlong},
                            type: "POST",
                            dataType: "text",
                            success: function (svg) {
                                    $("#map").html('<?xml version="1.0"?>' + svg)
                                            .attr({
                                                    'height': '100%',
                                                    'width': '100%'
                                            });
                            }
                    })
0 голосов
/ 23 июля 2011

Может быть проще, если вы начнете использовать jquery canvas .который является модульным языком для описания двухмерной векторной и смешанной векторной / растровой графики в XML

...