viewBox 属性是否适用于通过 IMG 标签包含的 SVG？答案

【问题标题】：Does the viewBox attribute work on included SVGs via the IMG tag?viewBox 属性是否适用于通过 IMG 标签包含的 SVG？
【发布时间】：2017-08-08 13:00:47
【问题描述】：

在 example1 下面是 html 文档中包含的内联 SVG 代码的 sn-p。注意viewbox="0 0 25 25""zooms"左上角的图像，所以它看起来比第二个例子大。

示例 1

<svg 
  xmlns="http://www.w3.org/2000/svg"
  width="200" height="200" viewbox="0 0 25 25"
>
  <defs>
    <style type="text/css"> 
      .line-1 {
        stroke: #0f7;
        stroke-width: 2;
        stroke-linecap: butt;
      }
      .line-2 {
        stroke: #0fe;
        stroke-width: 1.5;
        stroke-linecap: square;
      }
      .line-3 {
        stroke: #0ef;
        stroke-width: 1;
        stroke-linecap: round;
      }
    </style>
  </defs>
  <line
    x1="13" y1="7" x2="44" y2="55"
    class="line-1"
  />
  <line
    x1="6" y1="8" x2="61" y2="89"
    class="line-2"
  />
  <line
    x1="2" y1="6" x2="65" y2="97.5"
    class="line-3"
  />
</svg>

但如果我们将此 SVG 作为图像文件包含在内，viewbox 将不起作用。请参见下文，注意即使 viewbox="0 0 25 25" 仍然存在于 SVG 文件本身中，图像的缩小程度如何。

示例 2

&lt;img width="200" height="200" src="http://svgur.com/i/2Wc.svg"&gt;

在第二个示例中，SVG 文件的代码与第一个示例相同。（可以在这里看到：http://svgur.com/i/2Wc.svg [查看源代码]）。

在第二个示例中，viewbox 似乎被忽略了。除非这被认为是正确的行为。我不知道。如果这是正确的行为，那么如何在第二个示例中编辑视图框以像第一个示例一样缩放？有其他选择吗？

【问题讨论】：

@Paulie_D 如果包含在图像中，如何更改原始 SVG 上的视图框？这适用于内联 SVG。
@Paulie_D 所以这个问题的答案是否定的。你确定没有一些 JavaScript 解决方法就没有办法吗？那么 Normangorman 的方法可能有用。
@Paulie_D 查看已接受的答案。它是viewBox 而不是viewbox，它运行良好。这是非常可能的，并且由于这种不显眼的解决方案。

标签： html css svg image-scaling viewbox

【解决方案1】：

如果你改变，我认为原版应该可以正常工作

视图框到视图框

【讨论】：

不知道这会区分大小写。这种简单的解决方案很容易被忽略，因为 html5 不区分大小写。谢谢！这行得通。

【解决方案2】：

您可以使用此处描述的解决方法：https://stackoverflow.com/a/24933495/3335108

即在文档加载时将所有指向 SVG 的 img 标记动态转换为内联 SVG。

【讨论】：