Mapbox：改變懸停時的圓圈重量

Question

我已經用重量爲1px的L.circle繪製了一個圓圈。我想用平滑動畫將懸停上的重量更改爲2px。

Answer 1

作爲改變的L.Circle的「權重」（這實際上是其SVG形狀「筆劃寬度」）上懸停，只需將結合上"mouseover"和"mouseout"事件回調：

myCircle.on({ 
    "mouseover": function() { 
    myCircle.setStyle({ 
     weight: 2 
    }) 
    }, 
    "mouseout": function() { 
    myCircle.setStyle({ 
     weight: 1 
    }) 
    } 
}); 

至於流暢的動畫，你會有2個選項：

• CSS3過渡上的SVG屬性。但不幸的是IE不支持他們。
• 預置至執行動畫/過渡自己，典型地使用setInterval或​​，逐步調節權重。

隨着SVG屬性CSS3過渡：

的JavaScript：

var myCircle = L.circle(myLatLng, myRadius, { 
    weight: 1, 
    className: "test" 
}) 

CSS：

.test { 
    transition: stroke-width 1s; /* duration with unit */ 
} 

演示：http://jsfiddle.net/ve2huzxw/115/