在 Safari 中具有缩放和变换原点的 SVG animateTransform答案

【问题标题】：SVG animateTransform with scale and transform origin in Safari在 Safari 中具有缩放和变换原点的 SVG animateTransform
【发布时间】：2018-08-14 19:30:37
【问题描述】：

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

这是一个代码笔示例：https://codepen.io/knightjdr/pen/QQeNOj

我使用 animateTransform 实现缩放，并通过移动原点使其从下到上缩放。这在 Chrome 和 Firefox 中可以正常工作，但在从左上角缩放的 Safari 中则不行。

根据 Mozilla (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)，Safari 中对带有 svg 的转换源的支持是未知的，但我的示例似乎不支持它。

如果有人有建议，我正在寻找在 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>

【问题讨论】：

标签： html css svg

【解决方案1】：

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

在 Safari 上测试，效果很好。

下面的演示：

svg {
  max-height: 100vh;
  transform-origin: center bottom;
  animation: steam-animation 1s infinite;
}
@keyframes steam-animation {
  0%   { transform: scale(0,0); opacity: 0;}
  100% { transform: scale(1,1); opacity: 1;}
}

<svg viewBox="0 0 175 150" preserveAspectRation="xMinYMin">
  <g class="steam">
    <path
       fill="#763626"
       d="M138.422,14.336c-8.441,0-16.208,2.682-22.398,7.174C112.494,9.193,98.66,0,82.121,0C71.58,0,62.141,3.738,55.762,9.634c-4.618-1.997-9.784-3.118-15.239-3.118c-19.607,0-35.502,14.441-35.502,32.255c0,7.312,2.682,14.053,7.195,19.463C4.667,61.181,0,65.241,0,69.725c0,8.997,18.785,16.291,41.957,16.291c13.149,0,24.88-2.35,32.573-6.025c5.51,5.703,13.458,9.283,22.294,9.283c9.634,0,18.205-4.261,23.719-10.884c5.288,2.777,11.383,4.368,17.879,4.368c20.201,
0,36.578-15.316,36.578-34.21S158.624,14.336,138.422,14.336z"
    />
    <path
      fill="#AC867C"
      d="M160.967,55.897c0-14.556-10.783-26.355-24.085-26.355c-6.238,0-11.923,2.595-16.201,6.853c-5.278-4.719-13.404-7.747-22.525-7.747c-4.029,0-7.862,
0.592-11.344,1.657c-4.261-1.628-9.067-2.55-14.158-2.55c-17.475,0-31.642,10.8-31.642,24.122c0,3.975,1.269,7.722,3.503,11.028c-12.563,2.494-21.449,8.614-21.449,15.774c0,9.375,15.224,16.975,34.003,16.975c7.695,0,14.79-1.277,20.488-3.429c5.172,5.813,14.364,9.683,24.849,9.683c13.623,0,25.072-6.53,28.342-15.373c0.756,0.116,1.542,0.185,2.355,0.185c4.958,0,9.055-2.296,9.789-5.294C153.286,78.504,160.967,68.182,160.967,55.897z"
    />
    <line
       fill="none"
       stroke="#763626"
       stroke-width="4"
       stroke-miterlimit="10"
       x1="91.474"
       y1="74.599"
       x2="91.474"
       y2="125"
    />
    <line
       fill="none"
       stroke="#763626"
       stroke-width="4"
       stroke-miterlimit="10"
       x1="61.647"
       y1="83.668"
       x2="82.528"
       y2="125"
    />
    <line
       fill="none"
       stroke="#763626"
       stroke-width="4"
       stroke-miterlimit="10"
       x1="121.3"
       y1="83.668"
       x2="100.419"
       y2="125"
    />
  </g>
</svg>

【讨论】：