jquery - 使用 Javascript 缩放 svg 路径

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 的解决方案就快出现了。然而，这并不是完整的解决方案。

transform:orgin 中的百分比值在应用于 SVG 元素时的工作方式目前存在问题。 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

2020 年更新

Firefox 和 Chrome 行为不同的问题现已解决。 CSS 小组添加了一个新的 CSS 属性 transform-b​​ox，它允许您指定百分比 transform-origin 的计算方式。

Chrome 基于元素边界框计算百分比的旧(不正确)行为现在可以通过将 transform-b​​ox 设置为 fill-box 在所有浏览器中重现。这稍微简化了代码。

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

New demo fiddle here