在 SVG 中旋转和移动文本元素

Question

如何在 svg 中放置文本，如下所示：

文本旋转 -90 度
文本的中点（对角线的交点）变换后有一个固定点P（例如P.x = 200、P.y = 300）

在我的尝试中，我能够旋转元素，但是我似乎无法正确定位它。我什至尝试了基线、旋转中心等，但我现在完全迷路了。谢谢 <3

<text transform="rotate(-90, 0, 0) translate(200, 300)" dominant-baseline="central">Some Text</text>

Answer 1

猜猜我终于解决了。抱歉浪费您的时间。

<rect fill="red" width="100" height="100"></rect>
<text transform="translate(100, 100) rotate(-90)" text-anchor="middle" dominant-baseline="central" style="font-size: 18px;">Some Text</text>

Answer 2

正如 @enxaneta 评论的那样：

try using dominant-baseline="middle" text-anchor="middle" for the text and also try translating first and then rotating

因为执行转换的顺序是从右到左。先旋转，后平移

没有变形的初始状态红色圆圈是文本的中心

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" style="border:1px solid">  

<g >     
<circle cx="104" cy="37.5" r="4" fill="red" />
<text id="txt1" x="104" y="50"  font-family="sans-serif" font-size="36px" fill="black" text-anchor="middle" > Some Text </text>
</g>
</svg>

转换后文本的位置

.txt1 {
transform-origin:center;
transform-box:fill-box;
 text-anchor:middle;
font-family:sans-serif;
font-size:36px;
fill:black;
}

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" style="border:1px solid">  

<g>      
<circle cx="104" cy="37.5" r="3" fill="red" />
<text class="txt1" x="104" y="50" > Some Text </text>
</g>

<g transform=" translate(200, 300) rotate(-90, 0, 0) " >     
<circle cx="104" cy="37.5" r="3" fill="red" />
<text class="txt1" x="104" y="50" > Some Text </text>
</g>
</svg>

更新

文本旋转和移动动画

.txt1 {
transform-origin:center;
transform-box:fill-box;
 text-anchor:middle;
font-family:sans-serif;
font-size:36px;
fill:black;
}

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" style="border:1px solid">  
<g>
<g class="txt1" >    
<circle cx="104" cy="37.5" r="3" fill="red" />
<text  x="104" y="50"  font-family="sans-serif" font-size="36px" fill="black" text-anchor="middle" > Some Text 
</text>    
                       <!-- animation of text rotation -->
  <animateTransform id="anR" attributeName="transform" type="rotate" additive="sum"  to="-90,0,0" begin="1s;anT.end+1.5s" dur="2s" fill="freeze"   /> 
</g>      
                        <!-- animation of moving text -->
   <animateTransform id="anT" attributeName="transform" type="translate" additive="sum"  to="200,200" begin="anR.begin" dur="2s" fill="freeze"  /> 
</g>
</svg>

在 SVG 中旋转和移动文本元素

Rotate and move text element in SVG

svg

text

rotation

更新