使 <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> 和 <div> 的大小相同。

Answer 1

将此添加到父 div

#widget1 {
    display: flex;
    justify-content: center;
}

Answer 2

尝试添加：

width: XXXpx !important;
height: XXXpx !important;

Answer 3

svg primer 对此进行了回答（附有示例）。

tl;博士总结：

• 移除 svg 根上的 'width' 和 'height' 属性，并添加一个值为“0 0 wh”的 'viewBox' 属性，其中 w 和 h 是通常在 width 和 height 属性中找到的绝对值（请注意，viewBox 属性中不允许使用百分比和其他单位）