Geek Answers Handbook

Is it possible to animate an SVG background on a DOM element using CSS?

I used SMIL to animate the SVG image, then used that image as the background for the DOM element (e.g. button ).

For example, this is an SVG image ( http://mattstuehler.com/spinner.svg )

 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"> <g fill="none" stroke="#1e81cc" stroke-width="4"> <circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"/> <path d="M20,2 A18,18 0 0,1 38,20"> <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/> </path> </g> </svg>

However, now that SMIL is deprecated, how would you do this with CSS only?

Thanks in advance!

 button { width: 200px; height: 60px; background-color: #eee; background-image: url(http://mattstuehler.com/spinner.svg); background-repeat: no-repeat; background-position: center center; background-size: 50px 50px; border: none; -webkit-appearance: none; } 
 <button>Hello</button>
+5
source share
2 answers

Update:

Chrome has suspended the deprecation of SMIL for now. More here

One way is to use CSS animation. Animate the path element and fix transform-origin in the center of the turn signal.

Since we can have the <style> in the SVG element, we embed this animation in the SVG itself.

CSS / SVG Animation:

 <svg height="40" viewbox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"> <style> path { -webkit-animation: rotate 1s linear infinite; -moz-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; transform-origin: 20px 20px; } @-webkit-keyframes rotate { 100% { transform: rotate(360deg) } } @keyframes rotate { 100% { transform: rotate(360deg) } } </style> <g fill="none" stroke="#1e81cc" stroke-width="4"> <circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"></circle> <path d="M20,2 A18,18 0 0,1 38,20"></path> </g> </svg>

Using the above SVG as background:

 button { width: 200px; height: 60px; background-color: #eee; background-image: url(https://dl.dropboxusercontent.com/s/8j3gd6jfujxz2xg/spinner.svg); background-repeat: no-repeat; background-position: center center; background-size: 50px 50px; border: none; } 
 <button>Hello</button>

Note. Some browsers may display animated SVGs as static images when used as background . Refers to CSS and SMIL in the question.
Works great on Chrome / Opera and Firefox since version 51.

+6
source

You can use any static PNG / WebP / JPG image as the background for the pseudo-class of the button, and then rotate it using CSS.

 @keyframes btn_rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } button::before { content: ''; display: block; height: 60px; width: 60px; background: url(http://www.freeiconspng.com/uploads/spinner-icon-17.png); background-size: contain; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px); animation: btn_rotate 2s infinite; animation-timing-function: linear; } button { width: 200px; height: 60px; background-color: #eee; border: none; position: relative; overflow: hidden; } 
 <button>Hello</button>
+2
source

More articles:


All Articles