12

シンプルな SVG 要素の中に画像があります。

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

コード：

    <svg width="500px" height="500px" viewBox="0 0 70 70">
         <画像 x="0" y="0" 幅="10" 高さ="10"
               id="騎士" xlink:href="/images/knight.svg" />
    </svg>
4

2 に答える 2

8

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

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

  viewBox="0 0 45 45"

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

于 2013-07-18T08:08:40.903 に答える