CSS желаемый источник преобразования - PullRequest
Новая
       17

CSS желаемый источник преобразования

0 голосов
/ 22 апреля 2020

Я пытаюсь использовать transform: scale для группы элементов SVG Rect. Он масштабируется, но не из того транс-источника, который я хотел.

Чтобы уточнить, код выглядит следующим образом: 

.fw {
          animation: a2 2s linear 3 forwards;
          transform-origin: center bottom;
          
          }
   
@keyframes a2 {
        0% {
            transform: scale(0,0);
          }

        100% {
            transform: scale(1,1); 
          }
        } 
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="302" height="283">
  <title>Untitled-1</title>
   <g class="bcg">
    <rect x="0.5" y="0.5" width="301" height="282" fill="#ff5050"/>
    <path d="M693.5,152.67v281h-300v-281h300m1-1h-302v283h302v-283Z" transform="translate(-392.5 -151.67)" fill="#ff5050"/>
  </g>
   <g>
      <rect class="fw" x="25.5" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="60.79" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="96.07" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="131.36" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="166.64" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="201.93" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="237.21" y="100" width="5" height="83" fill="#fff"/>
      <rect class="fw" x="272.5" y="100" width="5" height="83" fill="#fff"/>
     </g>
</svg>

Теперь проблема в том, что я хочу, чтобы fw увеличивался от центра снизу каждого их собственного источника. Тем не менее, CSS вычисляет источник преобразования как центральную часть класса "bcg". Я не знаю, как это обойти.

Если кто-то может помочь, было бы здорово.

Заранее спасибо.

...