CSSアニメーションは、私は、画像/ objectタグでSVGをアニメーション化しようとしています<img>

Question

でSVGには対応していませんが、どのように画像内のSVGをアニメーション化する

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>

が動作していませんCSSここ

有する側に沿ってタグがそのコードのplunker https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview

Answer 1

<img>の内部をアニメーション化することはできません。たとえそれがSVGであっても。自己完結でなければなりません<img>を介して参照

1. CSSは、ドキュメントの境界を越えて適用されない、と
2. 画像：これには2つの理由があります。

CSSを外部SVG（通常は<style>の要素）に入れると、アニメーションが機能します。

transform-originのやり方を変更する必要があることにも注意してください。 Chromeで動作するのは便利ですが、現在の仕様では間違っています。 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,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>

Answer 2

Yでありあなたがの場合にはタグを埋め込む必要がある場合は、<?xml-stylesheet href="style.css" type="text/css"?>を使用できます。上記のコードは、objectタグで動作します

imgタグを動作させたい場合は、カイードが提案して埋め込むコードを実行します。