0
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 437.1 294.4" style="enable-background:new 0 0 437.1 294.4;" xml:space="preserve">
<style type="text/css">
.st0:hover {
fill: red;
}
</style>
<g id="Circle">
<path class="st0" d="M291.3,147.4c0,77-62.4,139.4-139.4,139.4S12.5,224.4,12.5,147.4C12.6,70.4,75,8,151.9,8
C228.9,8,291.3,70.4,291.3,147.4"/>
</g>
</svg>
これは、svgコードがhtmlファイル内にあるときに、期待どおりに機能します。
しかし、私はそれをsvgファイルの中に入れ、imgタグを使って呼び出すと、ホバー効果は働きません。
<img class="logo" src="url/logo.svg">
svgコードをhtmlに埋め込むことなくこれを行う方法はありますか?
ありがとうございます!
これがわかりました。この記事が役立ちました。 https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/ –