Question

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

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

我使用animateTransform实现缩放，并通过移动原点从底部到顶部进行缩放。这适用于Chrome和Firefox，但不适用于从左上角缩放的Safari。

根据Mozilla（https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin）对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>

Answer 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>

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

1 个答案: