Question

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

示例1

＆＃13;

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

＆＃13;

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

示例2

＆＃13;

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

＆＃13;

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

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

Answer 1

如果你改变了

，我认为原件应该可以正常工作

viewbox to viewBox

Answer 2

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

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

viewBox属性是否可以通过IMG标记处理包含的SVG？

2 个答案: