我想使用帶有百分比的轉換相對于其自身大小來偏移 SVG 元素，這與使用偏移 div 的transform: translate(100%,0)作業方式非常相似：
這段代碼：
<div style={{ overflow: 'visible', position: 'relative' }}>
{/* rect */}
<div style={{ height: 20, width: 20, background: 'black', position: 'absolute' }} />
{/* circle */}
<div
style={{
height: 20,
width: 20,
background: 'purple',
borderRadius: '50%',
position: 'absolute',
transform: 'translate(100%,0)',
}}
/>
</div>
看起來
不錯，圓偏移量是相對于它自己的大小
而這種情況：
<svg overflow={'visible'}>
<rect width={20} height={20} />
<circle cx={10} cy={10} r="10" fill="purple" style={{ transform: 'translate(100%,0px)' }} />
</svg>
將導致此渲染： 
它基本上是相對于 svg 畫布大小的偏移（我從未明確設定）： 
為什么transform: 'translate(100%,0)'在 div html 元素中相對于 self 作業，而在 SVG 元素上相對于父級？
已經嘗試過：
- 包裝
g元素，或svg類似于本網站其他答案的元素。
想避免：
- 我可以通過使用 .getbBox() 函式并手動計算尺寸并將其保存到狀態然后按像素偏移來潛在地解決這個問題，但我真的想避免它并且正在尋找一個更簡單的解決方案。
演示
https://codesandbox.io/s/svg-vs-div-transform-translate-o2ii7
uj5u.com熱心網友回復：
您應該將變換框設定為填充框。對于 React，你使用駝峰式大小寫，所以它看起來像這樣：
style={{ transform: "translate(100%,0px)", transformBox: "fill-box" }}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312371.html
標籤：javascript css 反应 svg
上一篇：是否可以創建影片，其中Html標簽將遵循svg路徑影片？
下一篇：將svg更改為不同的顏色