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，看到每个矩形都是相同的大小我相信像-15px和top -15px这样的东西应该做特技。

有没有办法只使用CSS来实现这个目标？

Answer 1

我不会评论 text 标签是如何存在的。

＆＃xA;＆＃xA;

如果要移动它，则需要将其显示为内联块，处于相对位置。

＆＃xA;＆＃xA;

  text {＆＃xA; display：inline-block：＆＃xA;位置：相对;＆＃xA;顶部：50％;＆＃xA;左：50％;＆＃xA; transform：translate（-50％， -  50％）;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

inline-block 只占用所需的空间
relative 以允许元素的位置
<代码> 50％将容器的左上角放在父级的中心
translate（-50％， - 50％）将容器放在父级的中心

＆＃xA;

Answer 2

要使用硬编码的<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);
}

CSS更改文本标记

2 个答案: