I'm trying to animate SVG in the image / object tag, but the animation does not work.

 svg { width: 100%; height: 200px; } .rotate-45 { transform-origin: center; transform: rotate(45deg); } .rotate { transform-origin: center; animation: rotate 1s ease-in-out infinite; } .rotate-back { transform-origin: center; animation: rotate 1s ease-in-out infinite; animation-direction: alternate; } .left { animation: move 1s ease-in-out infinite; } .right { animation: move 1s ease-in-out infinite; } @keyframes rotate { 100% { transform: rotate(calc(90deg + 45deg)); } } @keyframes move { 50% { transform: translate(-30px, -30px); } } 
 <svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="translate(500,500)"> <rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none" /> <rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none" /> <g transform="translate(-50,0) rotate(-45)"> <polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" /> </g> <g transform="translate(50,0) rotate(135)"> <polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" /> </g> <text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text> </g> </svg>

How to animate SVG inside image tag along with CSS .

Here is the plunker for this code - https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview

1 answer 1

You cannot animate the inner <img> elements outside. Even if it is an SVG. There are two reasons for this:

  1. CSS does not apply to document borders and

  2. Images referenced through <img> must be autonomous.

The animation should work if you place the CSS inside the outer SVG (as usual, in the <style> element).

Also note that you will need to change the transform-origin method. This way it works in Chrome is convenient, but it is incorrect according to the current specification. It will not work in other browsers, such as Firefox.

 <svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> .rotate-45 { transform-origin: 0px 0px; transform: rotate(45deg); } .rotate { transform-origin: 0px 0px; animation: rotate 1s ease-in-out infinite; } .rotate-back { transform-origin: 0px 0px; animation: rotate 1s ease-in-out infinite; animation-direction: alternate; } .left { animation: move 1s ease-in-out infinite; } .right { animation: move 1s ease-in-out infinite; } @keyframes rotate { 100% { transform: rotate(135deg); } } @keyframes move { 50% { transform: translate(-30px, -30px); } } </style> <g transform="translate(500,200)"> <rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none"/> <rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none"/> <g transform="translate(-50,0) rotate(-45)"><polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g> <g transform="translate(50,0) rotate(135)"><polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g> <text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text> </g> </svg>

A source

Note:

Works in all modern browsers: Chrome , Firefox , Opera , Yandex

The animation does not work in IE , Edge , as the developers of these browsers do not want to support the animation in full and see caniuse

  • 2
    SVG needs to be used inline more often, and in principle the object will do as well, but the first option is still better =) - Arthur