Javascript 上下移动水平线

Javascript 上下移动水平线,javascript,svg,snap.svg,Javascript,Svg,Snap.svg,我有一个svg型的温度计。我想用快照创建一些动画。我可以用给定的值设置文本的动画,但不能设置屏幕截图中可以看到的虚线的动画,以便按照给定的值移动。我该怎么做 这是我的密码 const svg = Snap(this.svg); const { color } = this.state; svg.line(55, 366, 90, 366).attr({ id: 'marker-line', stroke: color, strokeDasha

我有一个svg型的温度计。我想用快照创建一些动画。我可以用给定的值设置文本的动画,但不能设置屏幕截图中可以看到的虚线的动画,以便按照给定的值移动。我该怎么做

这是我的密码

const svg = Snap(this.svg);
    const { color } = this.state;
    svg.line(55, 366, 90, 366).attr({
      id: 'marker-line',
      stroke: color,
      strokeDasharray: '2 4',
      strokeWidth: '1'
});



 const animateMarker = (value, svg, marker, lastValue) => {
      // Snap.animate(value);
      const markerLine = svg.select('#marker-line');
      if (markerLine) {
        Snap.animate(
          lastValue || 0,
          value,
          val => {
            // markerLine.attr({ y1: 366-val });
            marker.textContent = roundOffDecimalDigit(val, 2); // eslint-disable-line no-param-reassign
          },
          400
        );
      }
    };

如果没有其余的代码,很难判断。您的代码看起来不错,只是它只设置了一个y坐标,我假设您想同时设置这两个坐标。乙二醇

Snap.animate(lastValue,value, function( val ) { markerLine.attr({ y1: val, y2: val }); }, 400 )
如果它仍然不起作用,试着把它放在JSFIDLE上,这样会更容易得到帮助