如何缩放嵌入<object>标签的顽固SVG？

我有一些指定SVG文件width和height以及viewbox这样的:

但是如何在浏览器中以我决定的大小显示它们？我希望它们更小,并尝试过:

但后来我得到了可见的滚动条.

如果我改变SVG文件设置它的工作原理width,并height以100%相反,但我想决定在HTML的大小,无论在SVG文件中使用什么尺寸.这可能吗 ？

1> 小智..：

---

您可以向标记添加"preserveAspectRatio"和"viewBox"属性来完成此操作.

在编辑器中打开.svg文件并找到标记.在该标记中,添加以下属性:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

将{width}和{height}替换为viewBox的一些默认值.我使用了SVG标签的"width"和"height"属性中的值,它似乎有效.

保存SVG,现在应该按预期进行扩展.

我在这里找到了这个信息:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

---

不要因为我做同样的问题:"viewbox"!="viewBox":)

---

@samccone:似乎只有'preserveAspectRatio ="xMinYMin遇见"`对我来说还不够.我还需要提供答案中提到的`viewBox`.可怜!

---

#protip所有你需要添加它这个preserveAspectRatio ="xMinYMin meet"

2> Zitrax..：

---

当我在2009年问这个问题时,这里给出的答案都没有给我带来帮助.因为我现在再次遇到同样的问题,我注意到使用标签和宽度以及svg一起工作正常.

---

当你使用``时,你会失去与链接,javascript等的所有交互性.

---

这比其他选项简单得多!如果有人好奇,这里有一个[哪些浏览器可以在标签中处理SVG]的表格(http://caniuse.com/svg-img).

---

如果SVG中没有超链接,这可能是最佳路径,否则,img不足,并且仍然必须使用像嵌入这样的替代方法.

---

Minor:img元素应该是自闭的,即``.

---

@JanAagaard:除了XHTML之外,[不需要关闭img标签](http://stackoverflow.com/a/3558200/345716).

---

您的img解决方案虽然看起来一目了然,但与在浏览器中实际绘制SVG完全不同.

3> joeforker..：

---

您可以使用JavaScript访问嵌入式svg:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

由于你的svg已经有了一个viewBox,Firefox应该将viewBox中的576像素宽度缩放到文档中的400像素宽度.其他svgs可能会受益于从广告的宽度和高度派生的新viewBox(这些通常是相同的数字).其他浏览器可能会受益于不同的svg调整.

4> 小智..：

---

img/logo.svg ...

这个设置对我有用.

5> Andrew Swift..：

---

我遇到一个问题,即iPad上的iOS无法正确调整