带有滑块的 SVG 图像从中心缩放答案

【问题标题】：SVG image scale from center with slider带有滑块的 SVG 图像从中心缩放
【发布时间】：2023-03-07 13:35:01
【问题描述】：

我制作了一个 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
          });
      }
  });

【问题讨论】：

标签： javascript jquery svg snap.svg

【解决方案1】：

对于 SVG，转换的默认起始位置是左上角。因此，为了覆盖它，您需要像这样在 SVG 上显式设置一个变换原点：

svg {
    transform-origin: center center;
}

【讨论】：

我认为它只适用于 html 标签中的普通图像。它不适用于掩码中较少的 svg 图像。
啊。我知道了。您正在缩放图像，而不是 SVG。抱歉，是我的错。我似乎读错了这个问题。 :)

【解决方案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

【讨论】：

完美！！这正是我想要的。谢啦兄弟。我修改了你的代码，让调整大小的行为更有意义。 jsfiddle.net/david7418/o497akje/5 请允许我再问一个关于此的问题。我刚刚添加了拖动事件以允许通过鼠标移动图像。是否可以限制移动范围以保持图像显示完整的星形掩码？
好吧，我已经完成了所有的事情，包括调整大小、旋转和拖动（除了拖动范围限制）。这是演示，以防有人需要。 jsfiddle.net/david7418/o497akje/6
但是，有一个小问题。如果我在移动后旋转图像，图像总是回到蒙版的中心。我认为矩阵计算有问题。有什么想法吗？
我不确定你的意思。对我来说似乎很糟糕（检查了 Chrome 和 FF）
请将图片拖到任意位置，然后旋转。图像将回到原来的位置（面具的中心）。它应该在您放置的位置旋转。