设置transform-origin为50%后SVG图形消失？关于其作用对象的疑问

问题出在SVG元素的transform-origin计算逻辑和普通HTML元素不一样：

• 普通HTML元素的百分比transform-origin是基于元素自身的尺寸计算的，但SVG元素默认情况下，百分比是基于**整个SVG视口（viewport/viewbox）**来计算的。

看你的例子：SVG视口是800x600，transform-origin:50% 50%会被解析为视口的中心(400,300)，而不是circle自己的中心(50,50)。当你给circle设置scale(2)时，它会以(400,300)为原点放大，原本在(50,50)的circle会被直接移出SVG视口，所以看起来消失了。这并不是设置了viewbox的原点，只是transform-origin的参考系错了。

解决方法 #

有两种简单的修复方式：

1. 使用元素自身的绝对坐标作为transform-origin

直接把transform-origin设置为circle的中心坐标(50px,50px)，这样缩放就会以自身中心为原点：

circle:hover{
    transform: scale(2);
    transform-origin: 50px 50px;
}

2. 设置transform-box让百分比参考元素自身

添加transform-box: fill-box属性，这个属性会让transform-origin的百分比基于元素自身的填充边界盒计算，此时50% 50%就会指向circle的中心：

circle{
    fill: red;
    fill-opacity: 50%;
    stroke: red;
    stroke-width: 1px;
    transform-box: fill-box; /* 关键属性 */
}

circle:hover{
    transform: scale(2);
    transform-origin: 50% 50%;
}

完整代码示例（方案2） #

svg{
    border: 1px solid red;
}

circle{
    fill: red;
    fill-opacity: 50%;
    stroke: red;
    stroke-width: 1px;
    transform-box: fill-box;
}

circle:hover{
    transform: scale(2);
    transform-origin: 50% 50%;
}

<svg width="800" height="600" viewBox="0 0 800 600">
        <circle cx="50" cy="50" r="20"/>
</svg>

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