title: SVG animateTransform with scale and transform origin in Safari
body: <p>I have an svg element that I would like to scale and have it scale from bottom to top.</p>
  
  <p>Here is a codepen example: <a href="https://codepen.io/knightjdr/pen/QQeNOj" rel="nofollow noreferrer">https://codepen.io/knightjdr/pen/QQeNOj</a></p>
  
  <p>I achieve the scaling with animateTransform and have it scale from bottom to top by moving the origin. This works fine in Chrome and Firefox but not Safari where it scales from the top left. </p>
  
  <p>Support for transform-origin with svg in Safari is unknown according to Mozilla (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin</a>), but it looks like it is not supported from my example.</p>
  
  <p>I'm looking either for a way to fix this in Safari or an alternative way of achieving this scaling effect if anyone has a suggestion.</p>
  
  <p>Here is the abbreviated code from codepen:</p>
  
  <pre><code>.steam {
     -webkit-transform-origin: 93px 130px;
  }
  
  &lt;svg&gt;
     &lt;g class="steam"&gt;
        &lt;path
          fill="#763626"
          d="..."
        /&gt;
        &lt;path
           fill="#AC867C"
           d="..."
        /&gt;
        &lt;animateTransform
           additive="sum"
           attributeName="transform"
           begin="0"
           dur="2"
           from="0 0"
           repeatCount="indefinite"
           to="1 1"
           type="scale"
        /&gt;
     &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>