我如何能使svg缩放与它的父容器?

我想让内联svg元素的内容在大小非本机时缩放。当然我可以把它作为一个单独的文件，然后像这样缩放。

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

Foo.svg: <svg width="123" height="456"></svg> .svg

但是，我想通过CSS向SVG添加额外的样式，因此链接外部样式不是一个选项。我如何使内联SVG规模?

当前回答

乱七八糟的&发现这个CSS似乎包含SVG在Chrome浏览器中，直到容器比图像大:

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

似乎也在FF + IE 11工作。

其他回答

调整currentScale属性在IE中工作(我用IE 11测试)，但在Chrome中不工作。

这里有一个简单的方法:

类型1:大多数svg都有一个视图框，如下所示:

<svg viewBox="0 0 24 30" ...>

你可以很容易地在css中控制它们的大小:

svg {
  height: 20px;
}

类型2:如果svg有宽度和高度，但没有视口，如下所示:

<svg width="810" height="540">

然后你可以手动添加一个与它的宽度和hegith完全相同的视图框，如下所示:

<svg width="810" height="540" viewBox="0 0 810 540">

然后你可以做与类型1相同的事情。

乱七八糟的&发现这个CSS似乎包含SVG在Chrome浏览器中，直到容器比图像大:

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

似乎也在FF + IE 11工作。

改变SVG文件对我来说不是一个公平的解决方案，所以我使用了相对的CSS单元。

Vh, vw， %都很方便。我使用CSS的高度:2.4vh;为我的SVG图像设置动态大小。

你会想这样做一个转换:

使用JavaScript:

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

用CSS:

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

将您的SVG页面包装在Group标签中，并将其定位为操纵整个页面:

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

注:Scale 1.0为100%

推荐文章