水平線を上下に移動

Question

私はsvgタイプの温度計を持っています。 Snapを使ってアニメーションを作成したい私は与えられた値でテキストをアニメートすることができましたが、スクリーンショットで見ることができる破線をアニメートすることはできませんでした。私はそれをどうすればいいのですか？ここで

コードの残りの部分がなければ、私のコード

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 
     ); 
     } 
    }; 

Answer 1

あり、それは伝えることは困難です。あなたのコードは大丈夫ですが、ちょうどy座標の1つしか設定しません。両方を設定したいと思います。例：

まだ動作しない場合は、それをjsfiddleに入れてお試しください。