使用Javascript的比例svg路径

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

这里我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教程和操纵？

我要像下面的图片结果：

如何能不能做到？

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

谢谢先进。

来源

2016-12-29 Radonirina Maminiaina

只需设置'变换原点：50％50％;'并删除所有并发症与'translate'和你应该得到一些非常接近你正在寻找的东西。请注意，您可能还需要操作元素的顺序，以便您希望看到其他元素的元素是最后一个元素。 – jcaron

哇，它的作品谢谢你。你可以设置此评论为anwser，我会将其标记为解决？ –

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

来源

2016-12-29 15:02:43

太棒了，它可以在Firefox和Chrome上运行。 –

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-索引问题，您可以查看<use>，或者简单地更改它们如何“绘制”的顺序。 SVG中的第一个元素将被绘制在其他元素之上。

来源

2016-12-29 12:41:53 MortenMoulder

最后一个元素，实际上。 – jcaron

在Firefox上，它被移位了。为什么Firefox的行为如此？ –

Firefox的行为正确。这是技术上不正确的Chrome。 SVG元素上'transform-origin'的百分比值与HTML元素的百分比值不同。 –

使用Javascript的比例svg路径

回答

相关问题