繪圖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

回答

相關問題