viewBox 属性是否适用于通过 IMG 标记包含的 SVG?

Question

下面的示例1是 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则不起作用。请参阅下文，并注意即使 SVG 文件本身仍然存在viewbox="0 0 25 25"图像也显得更加缩小。

示例 2

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

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

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

Answer 1

我认为如果您更改原版应该可以正常工作

视图框到视图框

Answer 2

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

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