JQuery SVG - 獲取R的圓圈值

Question

我使用this SVG plugin。

這是我的代碼：

$(function() { 
    $('#svgbasics').svg({onLoad: drawInitial}); 
}); 

function drawInitial(svg) { 

    var mycircle = svg.circle(75, 75, '50', {fill: '#f2477b', stroke: 'none', 'stroke-width': 0, class_:'drag'}); 

    $('.drag').click(function() { 
     $(this).animate({svgR: '0'},300, function() { $('.drag').css("display", "none"); }); 
    } 

    $("#restore").click(function() { 
     $('.drag').css("display", "block"); 
     $(this).animate({svgR: '50'},300, function() { }); 
    } 
} 

通常，有（半徑）R = 50的圓，並且當我點擊在圓圈它動畫到R = 0，然後消失的CSS（「顯示」時， 「沒有」）。然後當我點擊它再次出現在#restore元素的半徑= 50我想實現的是從mycircle變量得到這個「50」的值，是這樣的：svgR: $(this.R)

我怎樣才能得到這個值mycircle變量？

Answer 1

我只能在Firefox測試，但在瀏覽器mycircle.r返回SVGAnimatedLength實例，其animVal屬性返回SVGLength實例，又暴露了value屬性：

var radius = mycircle.r.animVal.value; 

你可以測試它this fiddle。

請注意，如果使用animVal而不是baseVal，則可以獲取圓的半徑的當前值（如果它正在進行動畫製作）。