使<svg>适合<object>容器的大小

Question

我有这个标记:

#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>and的大小相同<div>.

Answer 1

这在svg引物中得到回答(带有实例).

tl; dr摘要:

• 删除svg根上的'width'和'height'属性,并添加一个值为"0 0 wh"的'viewBox'属性,其中w和h是通常在width和height属性中找到的绝对值(注意百分比)和viewBox属性中不允许使用其他单位)