Почему синий круг не вращается в центре самого себя

Почему синий круг не вращается вокруг своей оси? Ниже вы можете найти мой предыдущий код.

Здесь вы можете увидеть мой CSS с пропорциональным SVG:

circle {
  animation: grow 2s infinite;
  transform-origin: center;
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<svg xmlns = "http://www.w3.org/2000/svg"
     width = "80"
     height = "110"
     version = "1.1">
     <rect width = "70"
           height = "100"
           x = "5"
           y = "5"
           fill = "white"
           stroke = "red"
           stroke-width = "10"
           rx = "5"/>
     <circle cx = "40" cy = "105" r = "3" fill = "blue"/>
</svg>

css svg css-animations

29.05.2019 07:23

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Поскольку масштаб в SVG другой, он масштабируется по осям X и Y. Кроме того, он масштабирует свойства «cx» и «cy». Лучший способ сделать «cx» и «cy» равными 0 и использовать «перевод» в нужные вам координаты.

 <svg xmlns = "http://www.w3.org/2000/svg" width = "80" height = "110" version = "1.1">
      <rect
        width = "70"
        height = "100"
        x = "5"
        y = "5"
        fill = "white"
        stroke = "red"
        stroke-width = "10"
        rx = "5" />
    	<circle cx = "0" cy = "0" r = "3" fill = "blue" transform = "translate(40 105)">
    		<animateTransform 
                     attributeName = "transform"
    				 type = "scale" 
    				 additive = "sum" 
    				 from = "1 1" 
    				 to = "1 1" 
    				 values = "1 1; 0.5 0.5; 1 1" 
    				 begin = "0s" 
    				 dur = "2s" 
    				 repeatCount = "indefinite">
    			
    		</animateTransform>
    	</circle>	
    </svg>

Наслаждаться!

29.05.2019 08:17

Ответ принят как подходящий

Вам нужно коробка-трансформер: fill-box;

circle {
  animation: grow 2s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<svg
  xmlns = "http://www.w3.org/2000/svg"
  width = "80"
  height = "110"
  version = "1.1"
>
  <rect
    width = "70"
    height = "100"
    x = "5"
    y = "5"
    fill = "white"
    stroke = "red"
    stroke-width = "10"
    rx = "5"
  />
  <circle cx = "40" cy = "105" r = "3" fill = "blue" />
</svg>

29.05.2019 08:25

Другие вопросы по теме

Как получить значения из файла SVG с помощью QT

Как исправить проблему маскирования пути SVG, когда слишком много частей пути обрезается при применении маски

Как я могу переключить значение текстового элемента svg с помощью D3.js, когда пользователь щелкает текст?

Направление прямой анимации SVG снизу вверх

Нарисуйте ромб, вписанный в группу с кругом SVG

Как добавить отступ к обводке круга SVG для простого пончика

Анимированный значок SVG увеличивает размер с помощью css

Как аниме КАЖДЫЙ svg

Предотвратить субпиксельный рендеринг с помощью svg

Белые значки svg не видны, когда цвет фона черный

Почему синий круг не вращается в центре самого себя

Ответы 2

Другие вопросы по теме

Похожие вопросы