javascript - 使用 Javascript 绘制 SVG

Question

我有以下代码片段：

draw: function drawFn ($dial) {

    var width = $dial.width(),
        height = $dial.height(),
        $svg = $('<svg />').attr({
            "width": width,
            "height": height
        }),
        circle = $('<circle />').attr({
            "cx": 0,
            "cy": 0,
            "r": width / 2,
            "fill": "red"
        });

    $svg.append(circle);
    $dial.append($svg);
}

$dial<div>是一个带有宽度和高度的 jQuery 包装元素。

和元素都附加到了，<svg>但它们没有可见的大小。我错过了什么？<circle><div>

在这里小提琴：http: //jsfiddle.net/alexcoady/pLvAw/2/

Answer 1

这是因为 svillamayor 链接到的原因。您不能直接从 jquery 制作 svg，因此您将实际元素附加到其中并将其包装在 jquery 中以对其进行修改。

我做了一个小提琴来展示你如何通过包装东西来做到这一点：

http://jsfiddle.net/vEEZT/4/

真正的诀窍是：

var $circle = $(document.createElementNS(NS, "circle"));