web-dev-qa-db-ja.com

Svg画像がFirefoxに表示されない

単純なSVG要素の中に画像があります。

  • Chrome：バージョン28。-完璧に動作します
  • Firefox：22.0-画像は描画されません
  • Opera：12.16-画像は通常の4倍の大きさで表示されます

コード：

 <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>
htmlimagefirefoxsvgopera
13
Alexandru Chirila

SVGにはviewBoxがないため、10x10の画像の長方形に合うようにスケーリングされていません。 SVGレンダラーは、SVGコンテンツをスケーリングする方法を知るために、SVGコンテンツのサイズを知る必要があります。それがviewBox属性の目的です。

ルートに以下を追加してみてください<svg>knight.svgの要素。

  viewBox="0 0 45 45"

また、svgとxlinkの名前空間を定義する必要があります。おそらくあなたは明確にするためにそれらを削除したばかりですが（？）。

9
Paul LeBeau

あなたの騎士のサイズは45x45ピクセルです。左上隅（10 x 10）ピクセルは空白です。

<image>マークアップの左上隅に画像を表示するように要求しているので、Firefoxには何もないため、何も正しく表示されません。

騎士を見たい場合は、<image>の幅と高さを45にして、基になるknight.svgの寸法と一致させます。

ChromeもOperaも画像を正しく表示していないようです

「image」要素は、「新しいビューポートの確立」で説明されているように、参照ファイルの新しいビューポートを確立します。新しいビューポートの境界は、属性「x」、「y」、「幅」、および「高さ」によって定義されます。

2
Robert Longson