title: CSS animation do not work for svg in <img>
body: <p>I am trying to animate an SVG in image/object tag but it is not working</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;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"&gt;
      &lt;g transform="translate(500,500)"&gt;
        &lt;rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none" /&gt;
        &lt;rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none" /&gt;
        &lt;g transform="translate(-50,0) rotate(-45)"&gt;
          &lt;polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" /&gt;
        &lt;/g&gt;
        &lt;g transform="translate(50,0) rotate(135)"&gt;
          &lt;polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" /&gt;
        &lt;/g&gt;
        &lt;text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif"&gt;loading data...&lt;/text&gt;
      &lt;/g&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to animate the SVG inside the image tag along side with CSS</p>
  
  <p>Here is a plunker for that code <a href="https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview" rel="noreferrer">https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview</a></p>