Можете ли вы анимировать svg "background-image"?

Я хочу центрировать SVG-изображение horzontal и вертикально реагировать на мое окно. Поэтому я решил интегрировать изображение в фоновом режиме. Теперь, когда я хочу добавить stroke-dasharray и анимацию с помощью штрих-кода для моего svg, он не работает.

Является ли этот почерп для анимации фонового изображения svg?

svg-образ состоит только из многих строк. Здесь мой svg файл (есть гораздо больше строк с разными значениями x и y):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1200"  xml:space="preserve">
<g id="Layer_1">

<line class="path" stroke-linecap="round" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="960" y1="600" x2="2346.139" y2="-42.064"/>

</g>
</svg>

Ответы

Ответ 1

Вы можете анимировать... но только в браузерах, которые его поддерживают - вы выходите из IE и некоторых других браузеров (Edit, по состоянию на 2018 Edge теперь поддерживает это).

Этот пример использует CSS для анимации... Я успешно использовал теги <animate> но не тестировал подробно.

.svg {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='300' height='70' viewBox='0 0 300 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E %23a%7Banimation:x .5s ease alternate 14%7D%40keyframes x%7Bfrom%7Bfill:%23c2c2c2%7Dto%7Bfill:%23fff%7D%7D%3C/style%3E%3Crect id='a' x='14' y='23' width='28' height='28' fill='%23c2c2c2' /%3E%3Crect x='52' y='33' width='100' height='11' fill='%23c2c2c2' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  min-height: 200px;
}
<div class="svg">Look at my background</div>

Ответ 2

A background-image - это не то, что вы можете анимировать с помощью CSS. Браузер не может вычислить значения между ключевыми кадрами, как это делают с цветовыми кодами HEX и числовыми значениями.

Есть, однако, два решения, о которых я знаю:

1) background-position и background-size можно управлять с помощью ключевых кадров, чтобы сдвинуть изображение, помещенное в фоновое изображение элемента.

2) Ваше изображение может быть содержимым элемента, который использует абсолютное позиционирование. Затем вы можете сдвинуть его и даже сжать/развернуть в соответствии с определенными атрибутами (такими как top, bottom, left, right, width и height.)