如何使用其父容器进行svg缩放？
我想让一个内联svg元素的内容在size是非原生的时候缩放。当然，我可以将它作为一个单独的文件，并像这样扩展它。
index.html：<img src="foo.svg" style="width: 100%;" />
foo.svg：<svg width="123" height="456"></svg>
但是，我想通过CSS向SVG添加额外的样式，所以链接外部样式是不可行的。如何创建一个内联SVG缩放？
回答 5
Stack Overflow用户
发布于 2013-10-21 10:28:28
若要独立于图像的缩放大小指定SVG图像内的坐标，请使用SVG元素的viewBox属性来定义图像的边框在图像坐标系中的位置，并使用width和height属性来定义相对于所含页面的宽度或高度。
例如，如果您具有以下内容：
<svg>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>它将渲染为一个10px x 20px的三角形：
现在，如果仅设置宽度和高度，将更改SVG元素的大小，但不会缩放三角形：
<svg width=100 height=50>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
如果设置视图框，则会导致它对图像进行变换，以使给定框(在图像的坐标系中)被放大以适应给定的宽度和高度(在页面的坐标系中)。例如，要将三角形放大到100px x 50px：
<svg width=100 height=50 viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
如果要将其放大到HTML视口的宽度：
<svg width="100%" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
请注意，默认情况下，会保留纵横比。因此，如果您指定元素的宽度应为100%，但高度应为50px，则它实际上只能缩放到50px的高度(除非您有一个非常窄的窗口)：
<svg width="100%" height="50px" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
如果您实际上想要水平拉伸，请禁用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>
(请注意，虽然在我的示例中我使用了适用于HTML嵌入的语法，但为了将示例作为图像包含在StackOverflow中，我将其嵌入到另一个SVG中，因此我需要使用有效的XML语法)
Stack Overflow用户
发布于 2015-01-16 12:32:15
胡闹&发现这个CSS似乎包含了Chrome浏览器中的SVG，直到容器比图像大：
div.inserted-svg-logo svg { max-width:100%; }似乎也可以在FF + IE 11中工作。
Stack Overflow用户
发布于 2020-03-18 00:53:37
另一种简单的方法是
transform: scale(1.5);https://stackoverflow.com/questions/19484707
复制相似问题