viewBox属性通过IMG标记在包含的SVG上工作吗？

Question

在example1中，下面是包含在html文档中的内联SVG代码片段。注意，viewbox="0 0 25 25"“放大”左上角的图像，使其看起来比第二个示例要大。

示例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

​

<img width="200" height="200" src="http://svgur.com/i/2Wc.svg">

​

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

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

Answer 1

我认为原版应该很好，如果你改的话

视图框到viewbox

Answer 2

您可以使用这里描述的解决方案：https://stackoverflow.com/a/24933495/3335108

也就是说，当文档加载时，动态地将指向SVGs的所有img标记转换为内联SVGs。