Scale svg from center with css animation

Question

I read several things about scaling a SVG path from the center, but nothing works.

    div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)}
    
        #circle {
          transform: scale(1) translate(0px, 0px);
          animation: circle .5s linear 1.3s forwards;
        }
    
        @keyframes circle {
          to {
            transform: scale(4.1) translate(-38px, -38px);
          }
        }

    <div>
      <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <circle id="Oval" fill="#2A2C32" cx="50" cy="50" r="11.5"></circle>
          </g>
      </svg>
    </div>

Fiddle

Does this answer your question? [SVG Scale Animation from Center Point instead of Upper-Left Corner](https://stackoverflow.com/questions/32260184/svg-scale-animation-from-center-point-instead-of-upper-left-corner) — Mahozad, Sep 05 '21 at 14:17

score 9 · Accepted Answer · answered Aug 23 '19 at 14:37

Use transform-origin and transform-box and avoid all that translate guessing you're doing.

div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)}
    
        #circle {
          transform: scale(1);
          transform-box: fill-box;
          transform-origin: center;
          animation: circle .5s linear 1.3s forwards;
        }
    
        @keyframes circle {
          to {
            transform: scale(4.1);
          }
        }

<div>
      <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <circle id="Oval" fill="#2A2C32" cx="50" cy="50" r="11.5"></circle>
          </g>
      </svg>
    </div>

Scale svg from center with css animation

1 Answers1

Linked