绘图SVG使用Javascript

我有下面的代码片断：绘图SVG使用Javascript

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/

来源

2013-07-26 Alex

，你需要添加的jQuery – dievardump

哈哈，你打败了我。现在增加:) – Alex

这可能是原因http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element – svillamayor

它为理由svillamayor链接。你不能直接从jquery制作svg，所以你追加了实际的元素，并将其包装在jquery中来修改它。

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

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

真正的窍门是：

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

在你的提琴

来源

2013-07-26 15:36:45 Matej

绘图SVG使用Javascript

回答

相关问题