viewBox属性是否通过IMG标签在包含的SVG上工作？

问题描述：

example1下面是html文档中包含的内联SVG代码片段。通知viewbox="0 0 25 25"“放大”左上角的图像使其看起来比第二个示例大。viewBox属性是否通过IMG标签在包含的SVG上工作？

例如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以像第一个那样进行缩放？有其他选择吗？

@Paulie_D让我怎么改变原始SVG视框如果包括为图像？这适用于内联SVG。 – basement

@Paulie_D所以这个问题的答案是否定的。你确定没有一些JavaScript解决方法没有办法做到这一点？然后Normangorman的方法可能会有用。 – basement

@Paulie_D查看接受的答案。它是'viewBox'而不是'viewbox'，它完美的工作。这是非常可能的，并且由于这种不明显的解决方案。 – basement

答

我觉得原本应该正常工作，如果你改变

视框中，以视框中

不知道这是否区分大小写。这种简单的解决方案很容易被忽略，因为html5不区分大小写。谢谢！这工作。 – basement

答

你可以使用下面介绍的解决办法：https://stackoverflow.com/a/24933495/3335108

即动态地把所有img标签指向SVGs内联SVGs文件加载时。

viewBox属性是否通过IMG标签在包含的SVG上工作？

相关推荐