Javascript 上下移动水平线
我有一个svg型的温度计。我想用快照创建一些动画。我可以用给定的值设置文本的动画,但不能设置屏幕截图中可以看到的虚线的动画,以便按照给定的值移动。我该怎么做 这是我的密码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
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上,这样会更容易得到帮助