如何使用父容器制作svg比例尺？

144

我想有一个内联svg元素的内容缩放时，大小是非本地的。当然，我可以将它作为一个单独的文件并按比例缩放。如何使用父容器制作svg比例尺？

的index.html：<img src="foo.svg" style="width: 100%;" />

foo.svg：<svg width="123" height="456"></svg>

不过，我想更多的样式添加到SVG通CSS，所以连接外接一个是不是一种选择。我如何制作内联SVG缩放？

来源

2013-10-21 bjb568

尝试前是工作美分svg宽度和高度。 – ncm

@ncm JS会如何处理？ – Mawg

313

要指定SVG图像内的坐标，而不依赖图像的缩放大小，请使用SVG元素上的viewBox属性定义图像的边界框在图像的坐标系中，并使用width和height属性来定义相对于包含页面的宽度或高度。

举例来说，如果你具备以下条件：

<svg> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg>

它将由20像素三角形10px的渲染：

10x20 triangle

现在，如果你只设置宽度和高度，这将改变SVG元素的大小，但不会缩放三角形：

<svg width=100 height=50> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg>

10x20 triangle

如果设置了视图框，会导致它对图像进行转换，使给定框（在图像的坐标系中）被放大以适合给定宽度和高度（在坐标系中的页面）。例如，为了扩大三角形是100像素50像素：

<svg width=100 height=50 viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg>

100x50 triangle

如果你想将其放大到HTML视口的宽度：

<svg width="100%" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg>

300x150 triangle

请注意，默认情况下，宽高比将保留。所以，如果你指定的元素应该有100％的宽度，但50像素的高度，它实际上只规模达50像素的高度（除非你有一个很窄的窗口）：

<svg width="100%" height="50px" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg>

100x50 triangle

如果你真的希望它与preserveAspectRatio=none水平拉伸，禁用长宽比保存：

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg>

300x50 triangle

（注意，虽然在我的示例中使用的语法适用于HTML嵌入，但将示例作为一个图像包含在StackOverflow中，而不是嵌入另一个SVG中，因此我需要使用有效的XML语法）

来源

2013-10-21 02:28:28

你怎么不仅使viewBox preserveAspectRatio，而且还是主框？我想宽度：100％;高度：自动为它。 – bjb568

@Dude：我认为'width =“100％”'没有指定高度的例子就是你想要的。我已经添加了图片来演示。它具有100％的宽度，并按比例放大高度。如果这不是你想要的，你可以尝试澄清你的意思吗？ –

哦。实际上没有问题。这只是一个webkit的bug。在Safari和Chrome中，“实际”高度默认为100％，而不是自动。那么我怎样才能解决这个问题呢？ – bjb568

您'会希望做一个转换为这样的：

用JavaScript：

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

使用CSS：

#yourtarget { 
    transform:scale(2.0); 
    -webkit-transform:scale(2.0); 
}

环绕你SVG在页组标签这样和目标它来操纵整个页面：

<svg> 
    <g id="yourtarget"> 
    your svg page 
    </g> 
</svg>

注意：规模1.0是100％

来源

2013-10-21 02:53:20

好的。我不想在这个JS。有没有办法让它变成适合父母？ – bjb568

@bj setAttribute与 –

瞎搞&发现这个CSS似乎包含在Chrome浏览器中的SVG起来的地步容器比图像放大：

div.inserted-svg-logo svg { max-width:100%; }

而且似乎在FF + IE 11.

来源

2015-01-16 04:32:15 Kerry7777

相同，这为我解决了这个问题。尽管我只看到iOS的溢出。谢谢！ –

同时使用'max-width：100％'和'max-height：100％'会使svg总是缩放到容器而不会溢出或丢失宽高比。 – Gavin

@Gavin'max-height：100％'不适用于我，通过使用'vh'而不是'％'来解决。 – Pavel

如何使用父容器制作svg比例尺？

回答

相关问题