*内联* SVG 图像缩放放置在*文件*中，但它没有

Question

我有一个 SVG 图像，当它内联到我的 HTML 中时，它可以完美地缩放，但是如果我将相同的 SVG 移动到一个文件并尝试在我的 HTML 中对该文件进行 IMG 或 OBJECT 标记，它根本无法缩放。

（我知道这里也有类似的问题，但通常相反。）

我已经阅读了this很棒的文章和其他文章，我也阅读了StackOverflow，但仍然没有答案。

顺便说一句，我从 Amazon 复制了 potofgold.svg，并且表现完美，所以我想它一定是我特定的 SVG。

我注意到的唯一不同的是我的 SVG 标签看起来像：-

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewbox="0 0 250 182.6" style="enable-background:new 0 0 250 182.6;" xml:space="preserve">

第一桶金是：-

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 55" >

如果我尝试从 SVG 标签中删除“冗余”和已弃用的选项，浏览器将拒绝显示图像。过时的 SVG？

当图像来自文件时，我可以做些什么来缩放图像吗？

编辑1：

如果有帮助，请选择 C here。西澳大利亚州州徽。是因为它没有“defs”部分吗？

Answer 1

自从您编辑相关页面的链接以来，我查看了 页面和我注意到表格有不同的列宽， 导致SVG图像的渲染宽度不同。 实际上，选项 C 似乎更窄，因此 SVG 图像缩放更小。

只是使用 Chrome 的检查器并添加这些 CSS 规则，你会注意到不同的渲染：

/*
My idea was: (4 x 22%) + (3 x 4%) = 100%

But it's not correct due to padding and borders, so the browser
will try to correct. So, instead, I'll set the seperating empty
columns to a width of 0% as there's already some padding.

Use !important to override the inline style attributes.
*/

/* Columns containing text and images */
#summary-state-coat-of-arms table td:nth-child(2n+1) {
  width: 22% !important;
}

/* Spacing columns (empty) */
#summary-state-coat-of-arms table td:nth-child(2n) {
  width: 0% !important;
}

我没有尝试用外部图像替换内嵌的 SVG 图像。 我刚刚注意到问题可能是由于表结构造成的 而不是 SVG 调整大小问题。