Подгонка <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>.

Ответ 1

Это ответ (с примерами) в svg primer.

tl; dr summary:

удалите атрибуты 'width' и 'height' в корне svg и добавьте атрибут 'viewBox' со значением "0 0 wh", где w и h - абсолютные значения, обычно встречающиеся в атрибутах width и height ( обратите внимание, что проценты и другие единицы не допускаются в атрибуте viewBox)

Ответ 2

Попробуйте добавить: ширина: XXXpx! important; высота: XXXpx! important;