SVG素材が<img src="">で読み出したら表示されるのに<svg xmln="">で読み出すと表示されない。

HTML
1<div class="logo">
2			<img src="http://localhost/wp-content/uploads/2017/12/◯-logo.svg"/>
3
4			<svg>
5			  <a xlink:href="http://localhost/wp-content/uploads/2017/12/◯-logo.svg">
6			    <path fill="#1E899D">
7			  </a>
8			</svg>
9		</div>

この書き方で、
<img>タグの部分は表示するのに、
<svg>タグの部分では表示がされません。

Chromeの検証画面ではブロックの存在は確認できるのですが、画像そのものは確認できません。
CSSでも上記の部分は何も記述していません。
ただbootstrapを使用しているのでそれが影響してるのかとも思いますが、自分にはわかりませんでした。

なぜ表示できないのでしょうか。
ご教示できる方いらっしゃいましたら、お手数ですがお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

SVGのa要素はHTMLのa要素と同様にハイパーリンクを表す要素です(画像を表示するものではない). ですから, 提示のコードではa要素配下のpath要素(の描画範囲)をクリックすることでxlink:href属性に指定したSVG文書にページが移動します.

xlink:href属性に指定した（SVG）画像を表示したいのであれば, image要素を用います.

HTML
1<div class="logo">
2    <img src="http://localhost/wp-content/uploads/2017/12/◯-logo.svg"/>
3
4    <svg>
5        <image width="100%" height="100%" xlink:href="http://localhost/wp-content/uploads/2017/12/◯-logo.svg"/>
6    </svg>
7</div>

NOTE:
現在WEB上で広く利用されているSVG1.1SEではimage要素にはwidth/height属性が必須です. 省略すると画像が表示されません.

投稿2017/12/30 03:30