Html 使用固定尺寸缩放SVG

我遇到了一个SVG火箭准备发射的超级酷的演示

JSFIDLE的第一行：

<svg version="1.1" x="0px" y="0px" width="307px" height="283px" id="rocket">

我知道SVG的意义在于“可伸缩”，但我只是意识到我不知道如何做到这一点。我想把整个火箭和它周围的圆圈缩小75%，但看起来一切都有明确的尺寸

---

有没有一种简单的方法可以将所有内容缩小到相同的数量，或者我必须手动缩放每个值？

我会这样做：

从svg中删除宽度和高度，添加一个具有宽度/高度属性的属性，添加一个具有“xMinYMin meet”值的属性，然后将svg绝对定位在一个相对定位的div中，宽度为：100%，最大宽度为您希望元素的宽度。最后一部分是padding bottom值，当我们调整svg元素的大小时，该值用作纵横比。长话短说就是这样

更改.svg容器的最大宽度值以查看svg比例：）工作演示：

/*=============================================
[页面设置]
==============================================*/
身体{
背景：#34495e
}
#换页{
宽度：100%；
溢出：隐藏；
}
.svg容器{
显示：块；
位置：相对位置；
宽度：100%；
垂直对齐：中间对齐；
溢出：隐藏；
最大宽度：100px；
保证金：0自动；
垫底：64%；
}
#火箭{
显示：内联块；
位置：绝对位置；
排名：0；
左：0；
}
/*=============================================
[非活动状态样式]
==============================================*/
.rocket_inner{
转换：translateY（15px）translateX（-3px）；
-webkit转换：.3s；
-moz跃迁：.3s；
过渡：.3s；
}
.icon_圆{
过渡：.2s；
填充：#22303e；
}
.大窗口路径{
过渡：.2s；
填充：#22303e；
}
.小窗小径{
填充：#22303e；
}
杨汝影先生{
填充：#34495e；
}
.火箭底部{
填充：#34495e
}
.火箭基地{
填充：#34495e
}
.火箭阴影{
填充：#34495e
}
.窗户{
停止颜色：#2DCB73
}
.window_grandient1{
停止颜色：#2AC16D
}
.window_grandient2{
停止颜色：#29B968
}
.window_grandient3{
停止颜色：#28B767
}
永濸基地{
填充：#34495e
}
·火炉径{
填充：#FC0
}
/*=============================================
[悬停样式]
==============================================*/
.火箭包裹：悬停。火箭基地{
填充：#FFFFFF！重要；
笔划宽度：0px！重要；
}
.rocket\u wrap:悬停。rocket\u阴影{
填充：#EDEDED！重要；
笔划宽度：0px！重要；
}
.rocket\u wrap：悬停。图标\u圆圈{
填充：#282e3a！重要；
笔划：#fff！重要；
笔划宽度：7px！重要；
}
.rocket\u wrap:悬停。小窗口\u路径{
填充：#28B767！重要；
笔划宽度：0px！重要；
}
.火箭环绕：悬停。翼影{
显示：块！重要；
填写：#FC9252！重要；
}
.火箭包装：悬停。机翼底部{
填写：#E16E36！重要；
笔划宽度：0px！重要；
}
.火箭包裹：悬停。火箭底部{
填充：#2DCB73！重要；
笔划宽度：0px！重要；
}
.rocket\u wrap:悬停。大窗口\u路径{
填充：url（#SVGID_2)）！重要；
笔划宽度：0px！重要；
}
.火箭包裹：悬停。火箭包裹内部{
转换：translateY（0px）translateX（-3px）！重要；
}
/*=============================================
[动画课程]
==============================================*/
.火灾{
显示：无；
动画延迟：0s；
填充不透明度：1；
动画计时功能：轻松自如；
笔划宽度：0px；
动画迭代次数：无限；
动画计时功能：线性；
变换原点：50%50%；
动画方向：正常；
}
.rocket_wrap:悬停#向左开火{
显示：块；
动画延迟：0s；
动画名称：fireLeft，fillOpacity1；
动画持续时间：1.2s；
}
.rocket_wrap:悬停#fireMiddle{
显示：块；
动画延迟：0s；
动画名称：fireMiddle，fillOpacity1；
动画持续时间：1s；
}
.火箭包裹：悬停#开火{
显示：块；
动画延迟：0s；
动画名称：fireRight，fillOpacity1；
动画持续时间：1.3s；
}
.rocket_wrap:悬停#向左{
显示：块；
动画延迟：0s；
动画名称：fireSmall，fillOpacity2；
动画持续时间：1.3s；
变换原点：底部；
}
.rocket_wrap:悬停#右侧{
显示：块；
动画延迟：0.3s；
动画名称：fireSmall，FillOpacity 3；
动画持续时间：1.6s；
变换原点：底部；
}
/*=============================================
[关键帧动画]
==============================================*/
@关键帧fireSmall{
10% {
变换：旋转（17度）translateY（1px）
}
20% {
变换：旋转（-13度）translateY（2倍）
}
30% {
变换：旋转（21度）平移（3倍）
}
40% {
变换：旋转（-34度）平移Y（4倍）
}
50% {
变换：旋转（24度）translateY（5px）
}
60% {
变换：旋转（-17度）translateY（6像素）
}
70% {
变换：旋转（31度）平移（7px）
}
80% {
变换：旋转（-28度）translateY（8px）
}
90% {
变换：旋转（14度）translateY（9像素）
}
99% {
变换：旋转（0度）translateY（10像素）
}
}
@左关键帧{
6% {
变换：旋转（25度）
}
15% {
变换：旋转（-19度）
}
25% {
变换：旋转（25度）
}
32% {
变换：旋转（-30度）
}
46% {
变换：旋转（22度）
}
54% {
变换：旋转（-29度）
}
61% {
变换：旋转（32度）
}
74% {
变换：旋转（-9度）
}
83% {
变换：旋转（16度）
}
99% {
变换：旋转（0度）
}
}
@关键帧fireMiddle{
10% {
变换：旋转（25度）
}
20% {
变换：旋转（-25度）
}
30% {
变换：旋转（30度）
}
40% {
变换：旋转（-22度）
}
50% {
变换：旋转（29度）
}
60% {
变换：旋转（-45度）
}
70% {
变换：旋转（37度）
}
80% {
变换：r