设置transformBox:fill-box时SVG path百分比平移为何与circle/rect表现不同

行为差异的核心原因 #

你遇到的差异本质是不同SVG元素的「填充边界盒（fill-box）尺寸计算规则不同」，导致translate百分比的参照基准不一样：

1. 对于<circle>这类基础图形：默认cx/cy为0，半径10的圆，填充边界盒的x范围是-10到10，总宽度为20，所以translate(100%)会沿x轴平移20个单位，刚好和原circle右边缘相切，符合你预期的效果。
2. 对于你使用的<path>：路径坐标是M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z，所有路径点的x坐标范围是0到1，所以填充边界盒的总宽度为1，即使外层加了scale(10)把绘制尺寸放大10倍，边界盒的逻辑宽度在计算CSS transform百分比时，仍然是按原始路径尺寸的1个单位计算，所以translate(100%)只会平移1个逻辑单位，对应放大后的10个物理单位，偏移量只有circle案例的一半，自然达不到预期。
   另外你把transform加在<g>容器上而不是直接加在<path>上，也会进一步导致部分浏览器对transform-box的计算逻辑出现兼容偏差，放大了异常效果。

解决方案 #

如果要让path的百分比平移效果和circle一致，可以采用以下两种方案：

方案1：调整transform挂载位置，强制按path自身边界计算 #

直接把transform和transform-box属性绑定到path元素本身：

const PathSvg = ({ stroke = "black", transform = "" }) => (
  <g transform="scale(10)">
    <path 
      d="M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z" 
      stroke={stroke}
      style={{ transform, transformBox: "fill-box" }}
    />
  </g>
);

// 调用时直接传入偏移规则
<svg overflow="visible">
  <PathSvg />
  <PathSvg stroke="purple" transform="translate(100%)" />
</svg>

方案2：统一边界盒基准 #

如果需要统一不同元素的偏移参照，可以给path加一个透明的、尺寸和circle边界盒一致的rect作为子元素，强制<g>的填充边界盒尺寸和circle对齐：

const PathSvg = ({ stroke = "black" }) => (
  <g transform="scale(10)">
    {/* 透明rect强制边界盒宽度为2，和半径1的圆边界盒宽度一致 */}
    <rect x="-1" y="-1" width="2" height="2" fill="transparent" />
    <path d="M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z" stroke={stroke} />
  </g>
);

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