単純なSVG要素の中に画像があります。
コード:
<svg width = "500px" height = "500px" viewBox = "0 0 70 70"> <image x = "0" y = "0" width = "10" height = "10" id = "knight" xlink:href = "/ images/knight.svg"/> </svg>
SVGにはviewBoxがないため、10x10の画像の長方形に合うようにスケーリングされていません。 SVGレンダラーは、SVGコンテンツをスケーリングする方法を知るために、SVGコンテンツのサイズを知る必要があります。それがviewBox属性の目的です。
ルートに以下を追加してみてください<svg>
knight.svgの要素。
viewBox="0 0 45 45"
また、svgとxlinkの名前空間を定義する必要があります。おそらくあなたは明確にするためにそれらを削除したばかりですが(?)。
あなたの騎士のサイズは45x45ピクセルです。左上隅(10 x 10)ピクセルは空白です。
<image>
マークアップの左上隅に画像を表示するように要求しているので、Firefoxには何もないため、何も正しく表示されません。
騎士を見たい場合は、<image>
の幅と高さを45にして、基になるknight.svgの寸法と一致させます。
ChromeもOperaも画像を正しく表示していないようです