如何制作交互式动画 SVG 折线图答案

【问题标题】：how to make interactive & animated SVG polyline chart如何制作交互式动画 SVG 折线图
【发布时间】：2016-12-02 11:43:24
【问题描述】：

所以，我正在尝试使用分配点的 SVG 和折线制作图表。这部分没有问题，但很新，因为我在 Web 开发方面正在努力使其具有交互性。我希望它在工具提示中的某个 X 值处显示鼠标悬停时的 Y 值。我设法创建了一个工具提示，但不知道如何获取 Y 值，那么有没有好的方法呢？

我正在尝试做的另一件事是为折线设置动画，使其看起来像是实际绘制的，而不是在读取坐标后仅出现在屏幕上。我在 SVG 中找到了类似的路径：https://jakearchibald.com/2013/animated-line-drawing-svg/

var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';

这是路径动画代码的样子，但由于某种原因它在折线上不起作用。是否有特定原因导致该路径不等于折线？

【问题讨论】：

标签： javascript html animation svg polyline

【解决方案1】：

我自己也在做类似的事情，但我还没有处理工具提示。但是，我确实有一个基于您引用的同一博客文章的动画折线的工作示例。

我能看到的唯一区别是我使用的是style.webkitTransition（注意小w），而您的代码使用的是style.WebkitTransition。我注意到了同样的区别in this answer. 也许在 2013 年的某个时候，该 CSS 属性的名称被标准化为小写字母。

function cssAnimate() {
  var polyline = document.getElementById('plotLine');
  var length = polyline.getTotalLength();
  // Clear any previous transition
  polyline.style.transition = polyline.style.webkitTransition = 'none';
  // Set up the starting positions
  polyline.style.strokeDasharray = length + ' ' + length;
  polyline.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  polyline.getBoundingClientRect();
  // Define our transition
  polyline.style.transition = polyline.style.webkitTransition = 'stroke-dashoffset 3s ease-in-out';
  // Go!
  polyline.style.strokeDashoffset = '0';
}
cssAnimate();

<html>
<svg id="plot" viewBox="0 0 100 100" class="chart">

  <polyline
    id="plotLine"
    fill="none"
    stroke="#0074d9"
    stroke-width="1"
    stroke-dasharray=""
    stroke-dashoffset="0.00"
    points="
    00,50
    10,70
    20,35
    30,65
    40,77
    50,91
    "
   />

</svg>

</body>

</html>

【讨论】：