为什么SVG元素transform:translate百分比偏移相对父级而非自身大小

CSS transform百分比取值的参考系，在HTML普通元素和SVG元素上的规范定义不同：

• HTML盒模型元素（如div）：translate的百分比默认参考元素自身的border-box尺寸计算，transform: translate(100%, 0)即横向偏移自身宽度的100%，符合预期效果
• SVG图形元素（不含外层

无需手动计算元素尺寸，只需给要偏移的SVG元素添加transform-box: fill-box属性，即可将transform百分比的参考系修改为元素自身的边框尺寸，和div的表现完全一致。

修改后的代码示例：

<svg overflow={'visible'}>
  <rect width={20} height={20} />
  <circle 
    cx={10} 
    cy={10} 
    r="10" 
    fill="purple" 
    style={{ 
      transform: 'translate(100%,0px)',
      transformBox: 'fill-box'
    }} 
  />
</svg>

如果需要变换行为和div完全对齐，可以额外添加transform-origin: 0 0，将变换原点调整到元素左上角即可。

内容的提问来源于stack exchange，提问作者Eliav Louski