web-dev-qa-db-ja.com

<svg>を<object>コンテナのサイズに合わせます

私はこのマークアップを持っています:

#widget1 {
    height:100px;
    width:200px;
}

<div class="widget" id="widget1">
    <object data="foo.svg" type="image/svg+xml" />
</div>

<object>要素を外側の<div>で埋めることができましたが、内側のfoo.svgファイルには独自のアイデアがあります。 foo.svg(もちろん、<svg>要素で構成されています)は、<object>および<div>と同じサイズである必要があります。

19
tillda

これは(例を使って) svgprimer で答えられます。

tl; dr要約:

  • svgルートの「width」属性と「height」属性を削除し、値が「0 0 wh」の「viewBox」属性を追加します。ここで、wとhは、幅と高さの属性に通常見られる絶対値です(パーセンテージに注意してください)。および他のユニットはviewBox属性では許可されていません)
46
Erik Dahlström