KnockoutJS and SVG

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">>
    <circle id="big" data-bind="attr:{cx:x1, cy:y1, r:r1}"/>
    <circle id="small" data-bind="attr:{cx:x2, cy:y2, r:r2}"/>
    <line id="line" data-bind="attr:{x1:x1, y1:y1, x2:x2, y2:y2}"/>
</svg>

CSS

#big {fill:red;}
#small {fill:black;}      
#small:hover {fill:blue;}
#line {stroke:black;}

JavaScript

var Model = function() {
    var initR = 20;
    this.x1 = ko.observable(300);
    this.y1 = ko.observable(200);
    this.x2 = ko.observable(this.x1() + initR);
    this.y2 = ko.observable(this.y1());
    this.r2 = ko.observable(5);
    this.r1 = ko.computed(function() {
        var dx = Math.abs(this.x1() - this.x2());
        return dx;
    }, this);
}
var model = new Model()
ko.applyBindings(model);

$('#small').draggable({
    drag: function(event, ui) {
        model.x2(ui.position.left + model.r2());
    }
});