Css масштабирует перемещение элемента SVG

Я пытаюсь сделать svg-анимацию, как показано в демо, когда я масштабирую зарядку svg, она была перемещена к левому краю контейнера.

Можно ли сохранить атрибуты x, y пути в svg? Или мой svg невозможно правильно анимировать?

.svg {
  width: 40%;
}

#charge {
  /* animation: charge 1s ease infinite; */
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}

<div class = "svg">
  <svg xmlns = "http://www.w3.org/2000/svg" id = "battery_1_" x = "0px" y = "0px" viewBox = "0 0 214 100">
                <polygon id = "outline" points = "214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
                <rect id = "charge" width = "180" height = "80" x = "10" y = "10" fill = "#0071BC"/>
              </svg>
</div>

css svg

24.04.2019 14:51

Приемы 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 сценарий полностью изменился.

655

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

Ответы 3

Вместо этого вы можете анимировать width, чтобы добиться желаемого эффекта:

.svg {
  width: 40%;
}

#charge {
  width: 10px;
  height: 80px;
  animation: charge 1s ease infinite;
}

@keyframes charge {
  0% {
    width: 0;
  }
  100% {
    width: 180px;
  }
}

<div class = "svg">
  <svg xmlns = "http://www.w3.org/2000/svg" id = "battery_1_" x = "0px" y = "0px" viewBox = "0 0 214 100">
   <polygon id = "outline" points = "214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
   <rect id = "charge" x = "10" y = "10" fill = "#0071BC"/>
  </svg>
</div>

24.04.2019 14:57

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

Вы можете использовать свойство transform-origin, позволяющее изменить положение трансформирующихся элементов. Значения по умолчанию — 50%, 50%, поэтому ваши преобразования начинаются с середины элемента.

.svg {
  width: 40%;
}

#charge {
  transform-origin: 10px;
  animation: charge 1s ease infinite;
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}

<div class = "svg">
  <svg xmlns = "http://www.w3.org/2000/svg" id = "battery_1_" x = "0px" y = "0px" viewBox = "0 0 214 100">
     <polygon id = "outline" points = "214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
     <rect id = "charge" width = "180" height = "80" x = "10" y = "10" fill = "#0071BC"/>
   </svg>
</div>

24.04.2019 15:02

Чтобы не устанавливать значение пикселя для transform-origin, вы также можете настроить transform-box так, чтобы transform-origin относился к элементу, а не ко всему SVG:

.svg {
  width: 40%;
}

#charge {
  transform-origin: left;
  transform-box:fill-box;
  animation: charge 1s ease infinite;
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}

<div class = "svg">
  <svg xmlns = "http://www.w3.org/2000/svg" id = "battery_1_" x = "0px" y = "0px" viewBox = "0 0 214 100">
     <polygon id = "outline" points = "214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
     <rect id = "charge" width = "180" height = "80" x = "10" y = "10" fill = "#0071BC"/>
   </svg>
</div>

24.04.2019 15:33

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

Как заменить значок SVG на значок на основе шрифта (Font Awesome/Ion)?

Создание узла svg на ссылке с помощью машинописного текста?

SVG как фоновое изображение, встроенное в атрибут стиля

Как правильно обрабатывать отрицательные значения на линейном графике с помощью react-native-svg

Формат SVG формата A4 не заполняет всю бумагу формата A4 при печати

Попробуйте использовать scour для очистки svg

Почему Safari не отображает мой элемент пути SVG?

Почему браузеры по-разному анализируют теги <script>?

Изображения не загружаются в приложение React с помощью Webpack, несмотря на наличие загрузчиков файлов (url-loader)

Древовидная диаграмма — предотвращение перекрытия узлов метками

Css масштабирует перемещение элемента SVG

Ответы 3

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

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