CSS scale animation in SVG text-tag not working on Safari

I am trying to have scale animation on an SVG text-tag. But it seems not working on WebKit based browser (Eg, Safari, Chrome iOS).

The word Test should show up, but not in Safari:

#text { 
  fill: #333;
  animation: scaleIn 0.3s ease-in-out forwards;
}

@keyframes scaleIn {
  from {
    transform: translate(50px, 50px) scale(0);
  }
  to {
    transform: translate(50px, 50px) scale(1);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
  <text x="0" y="0" alignment-baseline="central" dominant-baseline="central" id="text" text-anchor="middle">
    Test
  </text>
</svg>

CSS scale animation in SVG text-tag not working on Safari

0 Answers