從滑塊中心滑出的SVG圖像縮放

我製作了一個Jquery UI滑塊來動態控制蒙版中SVG圖像的大小。圖像從左上角調整大小。我想知道這是可能的調整從中心的形象？任何想法將不勝感激。從滑塊中心滑出的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 
      }); 
     } 
    });

來源

2017-07-19 david0116

-1

隨着SVG的變換來啓動默認位置是左上角。因此，爲了覆蓋這一點，你需要明確設置一個變換原點的SVG這樣的：

svg { 
    transform-origin: center center; 
}

來源

2017-07-19 10:58:19

我認爲這只是在HTML標籤工作正常圖像。它不適用於svg圖像，掩碼較少。 – david0116

啊。我懂了。您正在縮放圖像，而不是SVG。抱歉，是我的錯。我看起來似乎錯了。 :) –

您還需要移動圖像的x和y和height當您調整width。

我也改變了滑塊返回一個百分比。我認爲這樣做會更明顯一點。

$(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

來源

2017-07-19 15:03:36

完美！這正是我想要的。謝啦兄弟。我修改了你的代碼，讓調整行爲更有意義。 https://jsfiddle.net/david7418/o497akje/5/ 請允許我問一個關於此問題的更多問題。我只是添加拖動事件，以允許通過鼠標移動圖像。是否有可能限制移動範圍，以保持圖像顯示全明星面罩？ – david0116

嗯，我完成了整個事情包括調整大小，旋轉和拖動（除了拖動範圍限制）。這是演示，以防有人需要它。 https://jsfiddle.net/david7418/o497akje/6/ – david0116

但是，有一個小問題。如果我在移動後旋轉圖像，圖像將始終返回到蒙版的中心。我認爲矩陣計算是錯誤的。任何想法？ – david0116

從滑塊中心滑出的SVG圖像縮放

回答

相關問題