我正在制作堆疊條形圖。這是代碼筆
我嘗試添加transform: rotateX(90deg)為樣式，但無法正確顯示。這是我添加上述 css 的代碼行
<text
x={125 rowIndex * 60}
y={520}
textAnchor="middle"
style={{ fill: 'red',
fontSize: '13px',
transform: `rotateX(90deg)`
}}
>{entry.name}</text>
有人可以讓我知道如何實作這一點，以便清楚地查看 x 軸標簽。
uj5u.com熱心網友回復：
旋轉變換將圍繞當前原點旋轉。對于 SVG，默認為 SVG 的原點。即 0,0。因為您的文本離 (0, 0) 很遠，所以您的變換會將文本旋轉到遠離您想要的位置。
為避免這種情況，您需要transform-origin在旋轉之前更改。像這樣的東西：
<text
x={125 rowIndex * 60}
y={520}
textAnchor="end"
style={{ fill: 'red',
fontSize: '13px',
transformOrigin: (125 rowIndex * 60) 'px 520px',
transform: 'rotateZ(-45deg)'
}}
>{entry.name}</text>
在我對您上一個問題的更新答案中，我做了一個稍微不同的方式。我使用了rotate(angle,cx,cy)只有 SVGtransform屬性接受的特殊版本的rotate( ) 。它包括一個 X、Y 旋轉中心。對于 CSS，您必須使用transform-origin.
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370413.html
標籤：javascript html css 反应 svg
上一篇：如何洗掉物件陣列的物件鍵值？