SVG画像のスケールをスライダで中心から

Question

私は、マスク内のSVG画像のサイズを動的に制御するために、Jquery UIスライダを作成しました。左上隅から画像のサイズが変更されます。私はそれが中心からのイメージのサイズを変更することが可能であることを知っているのだろうか？任意のアイデアをいただければ幸いです。 SVGで

https://jsfiddle.net/david7418/o497akje/

obj = Snap(".cat"); 
    obj.drag(); 
    var dimens = obj.node.getBoundingClientRect(); 
    $("#slider").slider({ 
     max: dimens.width, 
     min: dimens.width/5, 
     step: 1, 
     value: dimens.width, 
     slide: function(event, ui) { 
      obj.attr({ 
       width: ui.value 
      }); 
     } 
    }); 

Answer 1

開始する変換のためのデフォルトの位置は左上隅です。だから、これを上書きするためには、明示的にこのようなSVGに変換-の原点を設定する必要があります。

svg { 
    transform-origin: center center; 
} 

Answer 2

また、あなたがwidthを調整すると、画像のxとyとheightを移動する必要があります。

また、割合を返すようにスライダを変更しました。私はそれがもう少し明らかであると思います。

$(function() { 
    obj = Snap(".cat"); 
    var dimens = obj.node.getBoundingClientRect();  
    console.log(dimens.width) 
    $("#slider").slider({ 
     max: 100, 
     min: 100/5, 
     step:1, 
     value:dimens.width, 
     slide: function(event, ui) { 
     w = ui.value * dimens.width/100; 
     h = ui.value * dimens.height/100; 
     obj.attr({ 
      width: w, 
      height: h, 
      x: (dimens.width - w)/2, 
      y: (dimens.height - h)/2 
     }); 
     } 
    }); 
}); 

Updated fiddle