使用Javascript扩展svg路径

Question

我有这个小提琴.

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

这是我的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的解决方案几乎就在那里.然而,这并不是完整的解决方案.

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

要解决此问题,您需要自己计算区域的中心.你可以通过调用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);
})

演示在这里小提琴