Проблема происхождения CSS-преобразования в подэлементе svg - PullRequest
Новая
       18

Проблема происхождения CSS-преобразования в подэлементе svg

0 голосов
/ 21 мая 2019

У меня возникли проблемы с источником преобразования при попытке масштабирования подэлементов.

При попытке масштабирования анимированного блока внутри большего svg он использует источник преобразования (0,0) изобщий svg, а не центр элемента, который я пытаюсь масштабировать.

Похоже, что он "летит сверху слева", а это не то, что я ищу.Я хочу, чтобы масштабирование происходило от центра элементов.

Как мне установить исходную точку трансформации относительно конкретного элемента, который я анимирую, без необходимости жестко кодировать позицию (x, y)сам подэлемент.

Вот простой пример проблемы, с которой я имею дело

@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
  }
  #animated-box {
  	animation: scaleBox 2s infinite;
  }
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    "><defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>

1 Ответ

2 голосов
/ 21 мая 2019

Вам нужен transform-box: fill-box; 

@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
  }
  #animated-box {
    transform-box: fill-box;
  	animation: scaleBox 2s infinite;
  }
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    "><defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
...