使用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是一個帶有寬度和高度的jQuery包裝<div>元素。

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