Html 使 <svg> 适合 <object> 容器的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4737243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit <svg> to the size of <object> container
提问by tillda
I have this markup:
我有这个标记：
#widget1 {
height:100px;
width:200px;
}
<div class="widget" id="widget1">
<object data="foo.svg" type="image/svg+xml" />
</div>
I managed to make the <object>element fill up the outer <div>, but the inner foo.svg file has its own ideas how big it is. I need foo.svg (which consists of an <svg>element, of course) to be the same size as <object>and <div>.
我设法让<object>元素填满了外部<div>，但内部 foo.svg 文件有自己的想法，它有多大。我需要 foo.svg（<svg>当然，它由一个元素组成）与<object>and 的大小相同<div>。
回答by Erik Dahlstr?m
This is answered (with examples) in the svg primer.
这在svg 入门中得到了回答（带有示例）。
tl;dr summary:
tl;博士总结：
- remove 'width' and 'height' attributes on the svg root, and add a 'viewBox' attribute with the value "0 0 w h", where w and h are the absolute values usually found in the width and height attributes (note that percentages and other units aren't allowed in the viewBox attribute)
- 删除 svg 根上的 'width' 和 'height' 属性，并添加值为“0 0 wh”的 'viewBox' 属性，其中 w 和 h 是通常在宽度和高度属性中找到的绝对值（注意百分比viewBox 属性中不允许使用其他单位）
回答by dudzio1222
Try to add: width: XXXpx !important; height: XXXpx !important;
尝试添加：width: XXXpx !important; 高度：XXXpx！重要；
