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

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

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

Svg-изображение состоит только из многих линий. Вот мой файл SVG (есть гораздо больше строк только с различными х и у значений):

<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>

А вот мой Html и Css файлы:

html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 

 
.Container { 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(Space.svg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 

 
.path { 
 
    stroke-dasharray: 20; 
 
}

<body> 
 
    <div class="Container"> 
 
    </div> 
 
    </body>

источник

2017-01-29 5rsly

Это стоит посмотреть https://github.com/jrummyapps/AnimatedSvgView –

/поиск д =? svg + анимация + преобразование или/поиск? p = svg + анимация + преобразование вы искали? :) –

Вы должны поместить CSS в файл изображения SVG, а не в HTML-файл контейнера или отдельный файл CSS. –

Вы можете анимировать ... но только с помощью CSS и только в браузеры, которые его поддерживают - вы идете IE и Edge.

.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>

Примечание фактическое кодированный SVG используется выше:

<svg width="300" height="70" viewBox="0 0 300 70" xmlns="http://www.w3.org/2000/svg"> 
    <style type="text/css"> 
     #a { animation: x .5s ease alternate 14; } 

     @keyframes x { 
      from { fill: #000; } 
      to { fill: #fff; } 
     } 
    </style> 
    <rect id="a" x="14" y="23" width="28" height="28" fill="#000" /> 
    <rect x="52" y="33" width="100" height="11" fill="#000" /> 
</svg>

источник

2017-01-30 12:16:03 Ruskin

Хорошо круто. Это работает сейчас, спасибо. Так что я виноват, что я пытался анимировать его в файле css, но вы написали «стиль» в код изображения. На самом деле я не знал, что вы можете это сделать. Но есть ли способ управлять анимацией извне, так, например, когда вы нажимаете кнопку, анимация должна начинаться/останавливаться? – 5rsly

Не с фоновым изображением ... альтернативой будет замена класса, у которого есть bg с неанимированной версией изображения ... css будет gzip очень хорошо. – Ruskin

вы можете попробовать анимацию SVG-SMIL ... но это тоже не работает в IE или Edge. – Ruskin

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

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

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

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

источник

2017-01-30 00:22:34

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

ответ

Смежные вопросы