#html #css #svg
#HTML #css #Анимация #svg
Вопрос:
У меня возникли проблемы с источником преобразования при попытке масштабирования подэлементов.
При попытке масштабировать анимацию блока в более крупном 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:
Вам нужно поле преобразования: поле заполнения;
@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> Комментарии:
1. Сработало как по волшебству, теперь я также могу добавить transform-origin: 50% 50%, чтобы сделать его правильно центрированным. Спасибо!