如何在 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>
uj5u.com熱心網友回復：
猜猜我終于解決了它。很抱歉浪費您的時間。
<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>
uj5u.com熱心網友回復：
正如@enxaneta評論的那樣：
嘗試對文本使用dominant-baseline="middle" text-anchor="middle" 并嘗試先平移然后旋轉
由于執行轉換的順序是從右到左。先旋轉，再翻譯
沒有變換的初始狀態紅色圓圈是文本的中心
<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> 轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/375862.html
上一篇：建議在畫布上繪制SVG路徑