2017-04-25 26 views
0

svgファイル内にCSSコードを入れずにオブジェクトタグ内のホバー上のSVG塗りつぶし色を変更するにはどうすればよいですか?私のコードは次のとおりです:svgファイル内にCSSコードを入れずにオブジェクト内のSVG塗りつぶし色を変更する方法

<div class="icon-holder"> 
    <object data="http://useaible.com/wp-content/themes/storefront/assets/images/icons/bulb-round.svg"></object> 
</div> 

私は、CSSがSVGファイル内にないと動作しないことを知っています。インラインSVGを使用せずにSVGファイル内のCSSを使用せずにホバー効果を実装する別の方法はありますか?

+0

あなたのHTMLファイルはSVGファイルと同じドメインにありますか? –

+0

私は別のフォルダに自分のSVGファイルを分けた。私はインラインsvgを使用したくないのです。なぜなら、それは自分のhtmlファイル上にたくさんのスペースを埋めるからです。 –

+0

同じドメインでない場合は、何もできない可能性があります。あなたのようなあなたのコメントはあなたの質問を理解していないように聞こえる。 –

答えて

-2

SVGスプライトを使用できます。そのようなあなたのbody後にSVGを定義します。

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <symbol id="icon-facebook" viewBox="0 0 16 32"> 
    <title>facebook</title> 
    <path class="path1" d="M4.973 30.593v-13.872h-4.973v-4.984h4.974v-4.433c0-4.595 2.775-7.303 6.874-7.303 1.964 0 3.66 0.211 4.152 0.276v5.053l-3.393-0.001c-2.229 0-2.646 1.106-2.646 2.66v3.749h5.711l-0.807 4.984h-4.904v13.872h-4.988z"></path> 
    </symbol> 
    </defs> 
</svg> 

とあなたのコードでそれを呼び出す:

<svg class="icon-facebook"><use xlink:href="#icon-facebook"></use></svg> 

あなたがそれにCSSをaplyことができますこの方法。

関連する問題