javascript - CSS更改文本标签的X位置

Question

我有以下无法更改的文本标签。我希望“测试”文本仅使用 CSS 居中。

<text 
  width="13.89" 
  height="13.89" 
  x="291.46999999999997" 
  y="156.55" 
  transform="rotate(0,277.78,142.86)" 
  text-anchor="end" 
  style="fill: rgb(255, 0, 0); font-size: 5pt; display:inline-block; position: relative; top: 50%; left: 50%; transform: translate(50%, -50%);"
>
  test
</text>

通过 javascript 函数，文本在矩形的右下中心获得 x 和 y。

我想将它移动到那个矩形的中间中心，我们唯一可以控制的是 CSS，因为每个矩形都是相同的大小，我相信像 left -15px 和 top -15px 这样的东西应该做把戏。

有什么方法可以只使用 CSS 来实现吗？

Answer 1

重新定位 <text> <svg> 中的元素硬编码 x和 y属性，使用 CSS，你可以使用 transform: translate将元素从其硬编码的 x,y 中偏移位置。

例子

/* move 10px left */
.textElementSelector {
  transform: translateX(-10px);
}

/* move 5px down */
.textElementSelector {
  transform: translateY(5px);
}

/* move 10px up and right */
.textElementSelector {
  transform: translate(10px, -10px);
}