CSS transform origin issue on svg sub-element

Question

I\'m having issues with the transform-origin while attempting to scale sub-elements.

While attempting to scale animate a box within a larger svg, it uses the transfo

Answer 1

You need transform-box: fill-box;

@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
  }
  #animated-box {
    transform-box: fill-box;
  	animation: scaleBox 2s infinite;
  }