Разница компоновки в SVG при динамическом добавлении

Question

В основном я хотел добавить элемент SVG под div после того, как div добавлен на страницу (путем запуска пользовательского события с помощью jQuery trigger). Когда я попытался сделать это, как показано ниже:

Css:

.full-size { 
    width: 100%; 
    height: 100%; 
} 

ЯШ:

var div = $("<div/>").css({'width': '100px', 'height': '100px'}); 

div.on(<customEvent>, function() { 
    var svg = $("<svg/>").addClass("full-size"); 

    svg.appendTo(div); 
}); 

размер SVG остается 0px 0px х. Но когда я добавляю SVG через d3 (показано ниже), он получает всю ширину и высоту div.

ЯШ:

var div = $("<div/>").attr("id", "div").css({'width': '100px', 'height': '100px'}); 

div.on(<customEvent>, function() { 
    var svg = d3.select("#div").append("svg:svg").attr("class", "full-size"); 
}); 

Может кто-нибудь пролить некоторый свет на то, почему это происходит?

Answer 1

Проблема заключается в том, что JQuery неправильно распознает элемент svg как элемент svg. Вместо этого он добавляется как «HTMLUnknownElement», который по умолчанию будет по умолчанию «span».

Тестовый кейс: http://fiddle.jshell.net/9jt2n/
Проверьте свойства svg в инспекторе DOM.

Быстрый google предполагает, что JQuery не имеет собственного способа сообщить об этом, чтобы создать элемент как нечто иное, чем HTML, но, как хорошо объясняет this article, вы можете создать элемент с простым Javascript, а затем использовать JQuery для отдых.

т.е., используйте следующий код:

var svg = $(document.createElementNS('http://www.w3.org/2000/svg', "svg")); 

svg.attr({"class":"full-size"}); 

svg.appendTo(div); 

Обновленный пример: http://fiddle.jshell.net/9jt2n/2/

В отличие от этого, d3 методы уже известны все имена элементов .SVG, и автоматически добавляет их в соответствующем пространстве имен.