需要Javascript内联SVG帮助

Question

我无法使用javascript翻译bar_position。

slider3.oninput = function() {
output3.innerHTML = this.value;
bar_position.style.transform='translate(0)';
}

请参阅Position Gauge上John（@johnkelton）的笔CodePen。

Answer 1

您有三个号码：start，value和end。您可以使用以下公式获得value和start之间的end百分比：

( value - minimum ) / ( maximum - minimum)

然后，您可以通过乘以元素的宽度将该百分比转换为UI，该元素在codepen中被硬编码为50.834像素：

const x = ( this.value - output1.innerHTML ) / ( output2.innerHTML - output1.innerHTML ) * 50.834;
bar_position.style.transform=`translate(${x}px)`;