例子地址:描点闪烁动效 | JShare
实现代码:
(function(H) {
H.wrap(H.SVGRenderer.prototype, 'symbol', function(proceed, symbol, x, y, w, h, options) {
if (symbol==='twinkle') {
var markerGroup = this.g('twinkle').attr({
translateX: x+ w/2,
translateY: y + h/2,
fill: options.color
});
var svgElem = this.circle(0, 0, w/2).attr({
fill: options.color || null,
stroke: options.lineColor,
'stroke-width': options.lineWidth
}).add(markerGroup);
svgElem.element.innerHTML = '<animate attributeName="r" calcMode="spline" values="0;'+w+'" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate>'+
'<animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate>'
return markerGroup;
}
return proceed.apply(this, [].slice.call(arguments, 1));
});
})(Highcharts);