使用SVG彈出效果或縮放效果

Question

我在SVG中創建了多個形狀，並添加了一種效果，可以在懸停時更改形狀顏色。

但是我怎麼能讓這些形狀在盤旋時稍微「彈出」？

希望有任何幫助。

Answer 1

我知道了該怎麼辦，我想加入

target.setAttributeNS(null, 'transform', "translate(0 0)"); 

這樣：縮放時

function unselectedColour(evt) { 
var target = evt.target; 
target.setAttributeNS(null, 'fill', 'white'); 
target.setAttributeNS(null, 'transform', "translate(0 0)"); 

} 

function selectedColourBuilding(evt) { 
var target = evt.target; 
target.setAttributeNS(null, 'fill', 'purple'); 
target.setAttributeNS(null, 'transform', "translate(-3 -3)"); 

} 

Answer 2

您可以修改每個元素的transform。大概是這樣的：

function onEnter (e) { 
    e.target.setAttribute('transform', 'scale(2,2)'); 
} 

function onLeave (e) { 
    e.target.removeAttribute('transform'); 
} 

但其實你並不需要使用屬性，採取長期緩慢的方式，而是可以使用SVG元素的transform接口。因此，文檔也在上面鏈接的頁面上。但處理這可能有點「不直觀」«第一次，因爲每個元素都有一個transform list與幾個transform items。

我認爲在svg轉換界面（以及一般的仿射轉換）中潛水是一個好主意，因爲它非常強大，但在準備使用之前它需要一個「學習曲線」。

如果你想短路這一點，你還可以用像一個輔助框架：svg.js，snapsvg或raphael它們都具有共同的方法來幫助您處理這樣的事情。

編輯

上面的函數只是例子，將一個能做到這一點。只有鼠標進入svg元素或離開時，才應調用onEnter和onLeave方法。所以，你可以添加一個mousemove監聽器和檢查目標是你想要的元素之一：

var firstElement = document.getElementById('<yourelementsid>'); 
    isOverFirstElement = false; 

window.addEventListener('mousemove', function (e) { 
    if (e.target === firstElement && isOverFirstElement == false) { 
     isOverFirstElement = true; 
     onEnter(e); 
    } else if (e.target !== firstElement && isOverFirstElement == true) { 
     isOverFirstElement = false; 
     onLeave(e); 
    } 
}, false); 

有了這樣就可以檢測到鼠標進入或離開，並做出相應的反應代碼。

Answer 3

爲了使「蹦出來」穩定，保持在它的當前位置，您可以計算其邊界框的中心，然後將該元素的中心轉換爲原點，對其進行縮放，然後將其轉換回其當前位置

eg

function onEnter(evt) 
{ 
    var target=evt.target 
    var bb=target.getBBox() 
    var bbx=bb.x 
    var bby=bb.y 
    var bbw=bb.width 
    var bbh=bb.height 
    var cx=bbx+.5*bbw 
    var cy=bby+.5*bbh 
    target.setAttribute("transform","translate("+(cx)+" "+(cy)+")scale(1.2 1.2)translate("+(-cx)+" "+(-cy)+")") 
} 
function onExit(evt) 
{ 
    var target=evt.target 
    target.removeAttribute("transform") 

}