<a>リンクが妙に

Question

私はSVGのアイコンを持っている私のウェブサイトでの振る舞い、私はこのスクリプトを使用していました。

だから私はタグで私のアイコンを包ん：

<a href="https://open.spotify.com/" target="_blank" class="svg-link"><img src="<?php bloginfo('template_url');?>/svg/play-white.svg" class="svg"></a> 

しかし、これは、この出力を生成します

これは、放火犯のショットです<svg></svg>

を強調

オレンジ色の部分がグレーになります。グレーを高さ60pxに設定しました。 svgも60pxです。アイテムには余白や余白がありません。

私はオーバーフローを起こす可能性があります：灰色のdivに隠されています。しかし、私はよりエレガントな方法、theリンクがsvgのサイズでしかない - と背の高いされていないかどうか疑問に思った。

ありがとうございました！

Answer 1

あなたはz-indexタグに興味があるかもしれません。 https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

これは私の作業例です：

<div class="col-md-2 col-sm-3 svg-link-wrapper"> 
    <a href="#musik" class="svg-link"><img src="icon.svg" class="svg"></a> 
    </div> 

.svg-link { 
    display: inline-block; 
    height: 60px; 
} 

.svg-link-wrapper { 
    text-align: right; 
    height: 60px; 
} 

Answer 3

そして私はちょうどそこに見つけた私は、はるかに良い解決策でしょう！ タグに背景画像をSVGとして与え、高さと幅を設定して準備が整ったら！

a .svg-link { 
       background-image: url(./svg/musik.svg); 
       height: 45px; 
       width: 45px; 
      }