Question

I’m using this SVG plugin.

This is my code:

$(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() { });
    }
}

Generally, there is a circle of (radius) R=50 and when I click at circle it animate to R=0 and then disappears css(“display”, “none”). Then when I click to the #restore element it appears again with it’s radius = 50. What I want to achieve is to get this ’50’ value from mycircle variable, something like: svgR: $(this.R)

How can I get this value from mycircle variable?

Answer 1

I could only test this on Firefox, but in that browser mycircle.r returns an SVGAnimatedLength instance whose animVal property returns an SVGLength instance that, in turn, exposes a value property:

var radius = mycircle.r.animVal.value;

You can test it in this fiddle.

Note that using animVal rather than baseVal allows to get the current value of the circle’s radius if it is being animated.