使用Javascript和JQuery動畫svg元素

Question

我試圖爲以下html元素設置動畫效果，以實現類似於音量輪的功能。

<svg id="circle_svg" width="200" height="175"> 
 
<circle cx="100" cy="85" r="75" stroke="black" stroke-width="2" fill="lightgray"/> 
 
<line id="line_alpha" x1="100" y1="85" x2="100" y2="160" style="stroke:rgb(0,0,255);stroke-width:2"/> 
 
<circle id="dot_alpha" cx="100" cy="160" r="10" stroke="black" stroke-width="2" fill="red"/> 
 
</svg>

的基本思路是，點擊紅點，並圍繞移動鼠標應該導致以下行爲：

1. 沿圓紅點移動（甚至如果鼠標沒有完全停留在它上面）。
2. 圓上線的終點跟在紅點之後。
3. 在頁面的其他位置顯示的數字會隨角度位移量而遞增或遞減。

我發現了一個demo網上，允許拖動SVG圈中的所有頁面各處，由感興趣的元素圓的屬性cx和cy結合mousedown和mouseup事件和重寫的當前位置老鼠。

但是，當用我的示例（甚至是原始代碼）測試jsfiddle上的代碼時，某些內容不起作用。你能否看看並給我一些關於可能出錯的建議？

• Jsfiddle my settings
• Jsfiddle original settings

Answer 1

我能找到解決我的問題（感謝朋友），將發佈它作爲其他參考：

的主要問題將這個online demo的代碼粘貼到jsfiddle的是JavaScript庫和函數的順序是不可預測的。

所以一些綁定可能會在綁定函數被定義之前調用。 此外，演示中的代碼比我需要的更復雜。

• 這裏是jsfiddle
• 下面的代碼解決方案專爲SO網站

var dragging = false 
 

 
var updateGraphics = function (e) { 
 
\t if (dragging) { 
 
    
 
    var parentOffset = $('#wheel').offset(); 
 
    var relX = e.pageX - parentOffset.left; 
 
    var relY = e.pageY - parentOffset.top; 
 
    
 
    var cx = +$('#circle').attr('cx') 
 
    var cy = +$('#circle').attr('cy') 
 
    var r = +$('#circle').attr('r') 
 
    var dx = relX - cx 
 
    var dy = relY - cy 
 
    //var dx = e.clientX - cx 
 
    //var dy = e.clientY - cy 
 
    
 
    console.debug('cx: ' + cx); 
 
    console.debug('cy: ' + cy); 
 
    console.debug('dx: ' + dx); 
 
    console.debug('dy: ' + dy); 
 

 
    console.debug('clientX: ' + e.clientX); 
 
    console.debug('clientY: ' + e.clientY); 
 
    
 
    console.debug('relX: ' + relX); 
 
    console.debug('relY: ' + relY); 
 
    
 
    var a = Math.atan2(dy, dx) 
 
    var dotX = cx + r * Math.cos(a) 
 
    var dotY = cy + r * Math.sin(a) 
 
    $('#dot').attr('cx', dotX); 
 
    $('#dot').attr('cy', dotY); 
 
    $('#line_2').attr('x2', dotX); 
 
    $('#line_2').attr('y2', dotY); 
 
    } 
 
} 
 

 
$('svg').on('mousedown', function (e) { 
 
\t dragging = true 
 
\t updateGraphics(e) 
 
}) 
 

 
$('svg').on('mouseup', function (e) { 
 
\t dragging = false 
 
}) 
 

 
$('svg').on('mousemove', updateGraphics)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="wheel" width="200" height="175" style="background-color:lightgreen;"> 
 
<circle id="circle" cx="100" cy="85" r="75" stroke="black" stroke-width="2" fill="lightgray"/> 
 
<line id="line_1" x1="100" y1="85" x2="100" y2="160" stroke-dasharray="15,15" style="stroke:rgb(255,0,0);stroke-width:2"/> 
 
<line id="line_2" x1="100" y1="85" x2="100" y2="160" style="stroke:rgb(0,0,255);stroke-width:2"/> 
 
<circle id="dot" cx="100" cy="160" r="10" stroke="black" stroke-width="2" fill="red"/> 
 
</svg>