使用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路徑

回答

相關問題