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>と同じサイズである必要があります。

csshtmlsvgsize
19
tillda

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

tl; dr要約：

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