使用 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-box，它允许您指定如何计算百分比 transform-origin。

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

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

New 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>，或者只是更改它们“绘制”的顺序。 SVG 中的第一个元素将绘制在其他元素之上。