javascript - 需要 Javascript 内联 SVG 帮助

Question

我无法使用 javascript 翻译 bar_position。

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

请参阅 CodePen 上John ( @johnkelton )编写 的 Pen Position Gauge。

标签： javascriptsvginline-svg

Answer 1

您有三个数字：start、value和end。您可以通过以下等式获得百分比value介于start和之间：end

( value - minimum ) / ( maximum - minimum)

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

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