Html Safari中带缩放和变换原点的SVG动画转换

我有一个svg元素，我想缩放它，并让它从下到上缩放

下面是一个代码笔示例：

我使用animateTransform实现缩放，并通过移动原点使其从下到上缩放。这在Chrome和Firefox中效果很好，但在Safari中效果不好，从左上角开始缩放

根据Mozilla的说法，Safari中使用svg支持transform origin是未知的，但我的示例似乎不支持它

我正在寻找一种在Safari中解决这个问题的方法，或者如果有人有建议的话，寻找一种实现这种缩放效果的替代方法

以下是codepen的缩写代码：

.steam {
   -webkit-transform-origin: 93px 130px;
}

<svg>
   <g class="steam">
      <path
        fill="#763626"
        d="..."
      />
      <path
         fill="#AC867C"
         d="..."
      />
      <animateTransform
         additive="sum"
         attributeName="transform"
         begin="0"
         dur="2"
         from="0 0"
         repeatCount="indefinite"
         to="1 1"
         type="scale"
      />
   </g>
</svg>

---

transform origin属性在所有浏览器中都有很好的支持，那么为什么不在SVG之外制作动画呢？另外，通过向SVG元素添加viewBox和PreserveSpectratio，可以控制viewBox的大小，并确保转换直接从元素的中心进行

在Safari上测试，效果完美

演示如下：

svg{ 最大高度：100vh； 变换原点：中心-底部； 动画：蒸汽动画1s无限； } @蒸汽动画的关键帧{ 0%{变换：缩放0,0；不透明度：0；} 100%{变换：比例1,1；不透明度：1；} }