使用Javascript绘制SVG

Drawing SVG using Javascript

本文关键字：SVG 绘制 Javascript 使用      更新时间：2023-09-26

我有以下代码片段：

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>元素，具有宽度和高度。

CCD_ 3和CCD_ 4元素都被附加到CCD_。我错过了什么？

Fiddle here：http://jsfiddle.net/alexcoady/pLvAw/2/

这是svillamayor链接到的原因。您不能直接从jquery中生成svg，所以您将实际元素附加在中，并将其封装在jquery中进行修改。

我做了一把小提琴来展示你是如何通过包装来做到这一点的：

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

真正的诀窍是：

var $circle = $(document.createElementNS(NS, "circle"));
相关文章：