从滑块中心滑出的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图像缩放

回答

相关问题