Illustratorで作成したSVGファイルをHTMLにリンクしてホバー効果を与える最も簡単な方法は何ですか？

Question

私は、オブジェクトやsvgタグを使用するなど、いくつかのオプションを検討しました。しかし、私は自分のSVGファイルをhtmlにリンクしてCSSを使ってアニメーション化する方法について混乱しています。ここで

は、私のコードの例

<div class="pull-left m-l-20 m-t-10 h3 inline-block"> 
    <svg id="lnkLeft" class="c-dark"></svg> 
</div> 

それはSVGタグを使用し、そこに画像ファイルをリンクして、CSSでクラスを使用してアニメーション化することは可能ですか？

Answer 1

答えははいです。CSSを使用してSVGをスタイルすることができます。は、です。そして、あなたが直接.c-darkかsvgを標的いずれかの方法でCSSを介して直接それをスタイルすることができます

<svg id="lnkLeft" class="c-dark"></svg> 

：

SVG はむしろ<img>またはbackground-imageに比べインライン SVGとして使用する必要があります。あなたはホバー上のSVGの色を変更したい場合は、あなたが実際にではなく、伝統的なcolorよりも、fill属性を探していることに留意してください：

.c-dark:hover { 
    fill: #FFF; 
} 

によりSVGファイルは、多くの場合、多くを取るにの行は、これはあなたのHTMLでかなり醜いことができます。あなたがPHPへのアクセス権を持っている場合は、次のことができfile_get_contentsとSVGが実際に出力：あなたはCSSでそれをターゲットにすることができますので、

<?php echo file_get_contents("image.svg"); ?> 

これは、直接ページにSVGをレンダリングします。

あなたは<img>タグでそれにリンク（または背景画像としてそれを使用）した場合、あなたはCSSを通してそれをスタイルすることができませんことを覚えておいてください！

さらに読むには、CSSのテクニックhereとhereをチェックしてください。

希望すると便利です。