viewBox 属性是否通过 IMG 标签对包含的 SVG 起作用？

Question

下面的 example1 是 html 文档中包含的内联 SVG 代码片段。请注意 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

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

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

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

Answer 1

您可以使用此处描述的解决方法：

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

Answer 2

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

视图框到视图框

viewBox 属性是否通过 IMG 标签对包含的 SVG 起作用？

Does the viewBox attribute work on included SVGs via the IMG tag?

html

css

svg

viewbox

image-scaling