Javascript 动态添加时SVG中的布局差异

我基本上希望在将div添加到页面后（通过使用jQuery触发器触发自定义事件），在div下添加一个SVG元素。当我尝试这样做时，如下所示：

css:

js:

var div=$（“”）.css（{'width'：'100px'，'height'：'100px}）；
div.on（，function（）{
var svg=$（“”）.addClass（“全尺寸”）；
svg.appendTo（div）；
});

SVG大小保持为0px 0px。但是当我通过d3（如下所示）添加SVG时，它会得到整个div的宽度和高度

js:

var div=$（“”）.attr（“id”，“div”）.css（{'width'：'100px'，'height'：'100px'）；
div.on（，function（）{
var svg=d3.select（“#div”）.append（“svg:svg”）.attr（“class”，“full-size”）；
});

---

有人能解释一下为什么会这样吗

问题在于JQuery没有正确地将svg元素识别为svg元素。相反，它被添加为“HtmlUnknowneElement”，基本上默认为“span”

测试用例：
在DOM检查器中检查svg属性

一个快速的google建议JQuery没有任何本机方式来告诉它以HTML以外的方式创建元素，但是正如很好地解释的那样，您可以使用纯Javascript创建元素，然后使用JQuery来完成其余的工作

i、 例如，使用如下代码：

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

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

svg.appendTo(div);

更新示例：

---

相比之下，d3方法已经知道所有svg元素名称，并自动将它们添加到相应的名称空间中。

在第二种情况下，您似乎没有附加到

div

，而是附加到ID为

div

的元素。这不是主要问题——如果没有“div”元素，那么d3根本不会添加任何内容。d3版本按预期工作，而JQuery版本则没有。

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

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

    svg.appendTo(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");
});

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

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

svg.appendTo(div);