JQuery SVG - 获取 R 的圆值

Question

我正在使用这个 SVG 插件。

这是我的代码：

$(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("display", "none")。然后，当我点击 #restore 元素时，它再次出现，它的半径 = 50。我想要实现的是从mycircle变量中获取这个 '50' 值，例如：svgR: $(this.R)

如何从mycircle变量中获取此值？

Answer 1

我只能在 Firefox 上对此进行测试，但在该浏览器中mycircle.r返回一个SVGAnimatedLength 实例，其animVal属性返回一个SVGLength实例，而该实例又公开一个value属性：

var radius = mycircle.r.animVal.value;

你可以在这个 fiddle 中测试它。

请注意，如果正在设置动画，则使用animVal而不是baseVal允许获取圆半径的当前值。