CSS：如何从Javascript变量设置元素的中间位置作为原点？

Question

我有一个标记刻度的图像，标记的位置在HTML中设置为

<image class="red-marker" xlink:href="./assets/images/marker.png"
[attr.x]=percentage width="12"height="40" y="0" ></image>

但是，我希望标记的中间位于此位置。现在它的左侧与之对齐。见图：

The marker's position when 'percentage' is 100%: 有什么方法可以用HTML，CSS或Javascript来解决这个问题，例如：

• 将图像原点设置为水平中间

• 在X位置使用CSS的calc（）和未知的Javascript变量
• 在Javascript中应用位置，在那里引用变量。

Answer 1

（已修改）您可以将transform: translateX(-50%)添加到图片的CSS中。这会将它向左移动一半宽度。

div {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  margin-left: 200px;
}

img {
  transform: translateX(-50%);
}

<div><img src="http://placehold.it/100x50/fa0"></div>