我如何 <embed> svg 并像 img 一样缩放它答案

【问题标题】：How do I <embed> svg and scale it like an img我如何 <embed> svg 并像 img 一样缩放它
【发布时间】：2012-02-07 15:36:16
【问题描述】：

我只是喜欢图片，我想将图片与页面分开。我可以拍摄 1024x768 的图像并执行此操作

<img src="1024x768.jpg" width="400" height="300"/>

或者我可以这样做

<img src="1024x768.jpg" style="width:400px; height:300px"/>

并且图像将被缩放而不是裁剪。我如何对 svg 做同样的事情？注意：我不想将 svg 直接嵌入到页面中。这就像对我的所有图像使用 dataURLs 一样愚蠢。我的艺术家编辑图像，其他人编辑 html，所以我需要将它们分开。

<embed src="somefile.svg" width="400" height="300"></embed>

不缩放 svg，它只是裁剪。 CSS 宽度/高度也不起作用。这有没有类似于图像的方法？

【问题讨论】：

标签： svg

【解决方案1】：

好吧，显然你可以在 img 标签中使用 svg

<img src="somefile.svg" width="200"/>

【讨论】：

如果你想使用那么你需要在元素会自动为您构建视图框（如果它丢失了）。
embed 和 img 之间的区别还有一点需要注意的是，前者将允许嵌入在 svg 中的脚本运行，而图像标签不会——至少不会在FF 和 Chrome 中的时刻——最有可能是一项安全功能。

【解决方案2】：

我遇到了同样的问题 - 在 IE 中，而不是 Chrome。我发现如果 svg 文件内部在 svg 标签上有 viewBox 属性，则会发生缩放（而不是裁剪）。

【讨论】：