在 highchart 一般绘图中，使 svg 标签在鼠标悬停时可缩放

【问题标题】：In highchart general drawing make svg label zoomable on mouse hover在 highchart 一般绘图中，使 svg 标签在鼠标悬停时可缩放
【发布时间】：2018-12-18 14:33:36
【问题描述】：

render = this.renderer,
colors = Highcharts.getOptions().colors;
                render.label("On_Mouse_Hover_Zoom",100,50).attr({'stroke-
width':1,stroke:'red'}).css({fontSize:'10px'}).add();

这段代码的输出是这样的 enter image description here

有没有办法让这个标签在鼠标悬停时可以缩放或临时增加标签大小，但它不应该失去它的实际大小。

【问题讨论】：

标签： javascript svg highcharts jquery-svg

【解决方案1】：

你可以用 css 简单地制作它：

  var label = this.renderer.label("On_Mouse_Hover_Zoom", 0, 0)
  .attr({
    'stroke-width': 1,
    stroke: 'red',
    id: 'your-label'
  })
  .css({
    fontSize: '10px'
  })
  .add();

  #your-label:hover text {
   fill: #efefef;
   font-size: 20px;
   transition: 0.2s;
  }

或使用 javascript，但这种方法效率较低：

document.getElementById('your-label').onmouseenter = function() {
  label.attr({
    transform: 'scale(1.2)'
  });
}

document.getElementById('your-label').onmouseleave = function() {
  label.attr({
      transform: 'scale(1)'
  });
}

您可以在这里查看示例：https://jsfiddle.net/wchmiel/p0c1v5w3/

【讨论】：