Question

我有 fiddle 。

当我点击路径时，我想要缩放它。但是在缩放之后，点击的路径失去了他当前的位置。

这是我的jQuery代码：

var svg = $("#svg-container");

svg.load("svg/fondcarte-collec_actuelle.svg", function(data) {
  svg.children().find("path").click(function(e) {
    $("#Layer_1 path").removeAttr("style");
    var x =  e.pageX - svg.width() - $(this).offset().left - this.getBoundingClientRect().width + svg.find("svg").offset().left + 250;
    var y = e.pageY - svg.height() - $(this).offset().top - this.getBoundingClientRect().height + svg.find("svg").offset().top + 250;
    console.log(this.x, this.y)
    $(this).css("transform", "translate(" + x + "px, " + y + "px) scale(1.3)");
    $(this).css("fill", "green");
  })
})

如何在不丢失当前位置的情况下进行缩放？
有人可以给一个带有svg教程和操作的网站吗？

我想要一张如下图所示的结果：

怎么做？

注意：我没有插件就问过它，因为我想了解这个缩放概念。

先谢谢。

Answer 1

MortenMuulder的解决方案几乎就在那里。然而，这并不是完整的解决方案。

当应用于SVG元素时，transform:orgin中的百分比值的工作方式存在问题。 Chrome和Firefox彼此不一致。从技术上讲，Firefox是遵循当前规范的。您可以在关于该主题的其他S.O问题中阅读更多相关内容。

要解决此问题，您需要自己计算区域的中心。你可以通过调用元素上的getBBox()来做到这一点。返回元素的位置，宽度和高度。

var bbox = this.getBBox();
var centreX = bbox.x + bbox.width/2;
var centreY = bbox.y + bbox.height/2;

您需要做的另一件事是将当前区域移到所有其他区域之前。要做到这一点，你需要移动它，使它成为最后一个元素。我们可以这样做：

this.parentElement.appendChild(this);

我们得到父元素并将当前元素追加到它的子元素的末尾。这具有移动它的效果。

所以最终的点击处理程序看起来像这样：

svg.children().find("path").click(function(e) {
  $("#Layer_1 path").removeAttr("style");
  $this = $(this);
  var bbox = this.getBBox();
  var centreX = bbox.x + bbox.width/2;
  var centreY = bbox.y + bbox.height/2;
  $this.css("transform-origin", centreX + 'px ' + centreY + 'px');
  $this.css("transform", "scale(2)");
  $this.css("stroke", "white");
  $this.css("fill", "green");
  this.parentElement.appendChild(this);
})

Demo fiddle here

Answer 2

https://jsfiddle.net/mortenmoulder/y0f1vk1r/3/

$(this).css("transform-origin", "50% 50%");
$(this).css("transform", "scale(2)");
$(this).css("stroke", "white");

只要您记得将transform-origin设置为50% 50%，删除原始转换就可以了。我还扩大了元素并添加了一些笔画。由于我们有一些z-index问题，您可以查看<use>，或者只是更改它们的绘制顺序＆＃34;。 SVG中的第一个元素将被绘制在其他元素之上。

使用Javascript扩展svg路径

2 个答案: