Question

我有一个SVG元素，该元素被应用了transform: rotate(0deg)值，该值使圆围绕其他东西移动。我想将文本添加到圆的中心，但是我遇到的问题是，由于圆和文本共享相同的rotate属性用于对齐，因此文本不可读，因为它通常是上下颠倒的。

是否有一种方法可以使位于圆内的文本始终保持直立状态，而无需手动更改circle和circle-text css属性？是否可以通过某种方式使tspan元素的自身方向回到浏览器的默认设置？

svg {
 height: 100%;
 width: 100%;
}

circle {
 transform: rotate(50deg);
}

.circle-text {
 transform: rotate(50deg);
}

.container {
 max-width: 800px;
 height: 800px;
 margin: 0 auto;
}

<div class="container">
 <svg width="200" height="100">
  <circle cx="64.5" cy="0" r="10" fill="#472e12" />
   <text class="circle-text" x="64.5" y="0" text-anchor="middle" fill="#fff">
     <tspan>-30</tspan>
   </text>
 </svg>
</div>

Answer 1

这是我的解决方案：我将圆圈和文本都放在一个组.theg中，并且正在旋转组50deg。接下来，我旋转文本-50deg，同时设置transform-origin:64.5px 0;，即文本围绕圆心旋转。

我还向圈子添加了dominant-baseline="middle"。我希望这就是您所需要的。

svg {
 width: 100%;
}
.theg{
 transform: rotate(50deg);
}
.circle-text {
 transform-origin:64.5px 0;
 transform: rotate(-50deg);
}

<div class="container">
 <svg viewBox="0 0 200 100">
  <g class="theg">
  <circle cx="64.5" cy="0" r="10" fill="#472e12" />
   <text class="circle-text" x="64.5" y="0" text-anchor="middle" dominant-baseline="middle" fill="#ff0">
     <tspan>-30</tspan>
   </text>
   </g>
 </svg>
</div>

使旋转的SVG元素的子文本直立

1 个答案: