我想让内联svg元素的内容在大小非本机时缩放。当然我可以把它作为一个单独的文件,然后像这样缩放。
Index.html: <img src="foo.svg" style="width: 100%;"/>
Foo.svg: <svg width="123" height="456"></svg> .svg
但是,我想通过CSS向SVG添加额外的样式,因此链接外部样式不是一个选项。我如何使内联SVG规模?
我想让内联svg元素的内容在大小非本机时缩放。当然我可以把它作为一个单独的文件,然后像这样缩放。
Index.html: <img src="foo.svg" style="width: 100%;"/>
Foo.svg: <svg width="123" height="456"></svg> .svg
但是,我想通过CSS向SVG添加额外的样式,因此链接外部样式不是一个选项。我如何使内联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%
其他回答
改变SVG文件对我来说不是一个公平的解决方案,所以我使用了相对的CSS单元。
Vh, vw, %都很方便。我使用CSS的高度:2.4vh;为我的SVG图像设置动态大小。
要指定SVG图像内的坐标而不受图像缩放大小的影响,可以使用SVG元素上的viewBox属性定义图像在图像坐标系统中的边界框,并使用width和height属性定义相对于包含页面的宽度或高度。
例如,如果你有以下情况:
<svg>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
它将呈现为一个10px * 20px的三角形:
现在,如果你只设置宽度和高度,这将改变SVG元素的大小,但不会缩放三角形:
<svg width=100 height=50>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
如果您设置了视图框,则会导致它转换图像,以便将给定的框(在图像的坐标系统中)按比例放大以适应给定的宽度和高度(在页面的坐标系统中)。例如,要将三角形放大到100px * 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语法)
你会想这样做一个转换:
使用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%
这里有一个简单的方法:
类型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相同的事情。
如果你想在没有preserveAspectRatio属性的情况下缩放SVG。
通过这种方式,SVG将始终拉伸以填充宽度和高度,为了做到这一点,它将调整宽度或高度的大小,如果必要的话,正在寻找这个几天,所以想在这里分享它,以防其他人正在寻找这个
你必须从<svg>中删除宽度和高度,并添加viewBox属性,并添加preserveAspectRatio="none"
例子
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">
<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>