Html 将svg调整为页面宽度

有没有办法拉伸svg动画以适应设备的整个屏幕。我想显示以下svg动画的两个实例，使每个实例占据屏幕宽度的一半。有没有办法重新定位svg的viewbox

JSFIDLE-

---

我希望这有助于回答你的问题：

注意，我将SVG代码包装在一个div中，并在HTML文件中使用“responsive”类。当多次使用同一个SVG时，您只需更改您希望更改的图形的id名称。。。e、 g.注意我添加的#plane2和#plane3的持续时间的变化。然后删除了.svg和#平面定义，并添加了.half responsive和.full responsive定义，使svg响应CSS文件中的各种屏幕大小

html{
背景色：#28505D；
}
.飞机路径{
笔划：#D9DADA；
笔画宽度：.1%；
笔画宽度：.5%；
笔划数组：1%2%；
笔划线头：圆形；
填充：无；
}
.fil1{
填充：#D9DADA；
}
.fil2{
填充：#C5C6；
}
.fil4{
填充：#9D9E9E；
}
.fil3{
填充：#AEAFB0；
}
.半信半疑{
宽度：50%；
浮动：左；
}
.完全响应{
宽度：100%；
浮动：左；
}

响应性SVG动画

您只需删除SVG中的任何内部宽度声明并使用

svg {
  width: 50%;
  float: left;
}

html{
背景色：#28505D；
}
svg{
宽度：50%；
浮动：左；
}
.飞机路径{
笔划：#D9DADA；
笔画宽度：.1%；
笔画宽度：.5%；
笔划数组：1%2%；
笔划线头：圆形；
填充：无；
}
.fil1{
填充：#D9DADA；
}
.fil2{
填充：#C5C6；
}
.fil4{
填充：#9D9E9E；
}
.fil3{
填充：#AEAFB0；
}

您的JSFIDLE和上面的代码不匹配…但您的意思是这样吗-@Paulie\u D是的，谢谢。谢谢。我知道这是一个与问题无关的新主题，但当我尝试在悬停时缩放svg时，它会被移动到一个新位置，是否可以缩放svg并使其跟随路径？您可能需要提出新问题，但我猜您的

scale

转换正在重新设置您在svg中定义的转换。嘿，Paulie_d，感谢您的输入。我完全想对伦佐斯的问题提供一个更详细的答案。我必须运行并测试我的建议答案，然后才能将其全部发布。我会在今后的任何回复中记住你的建议。。。谢谢

html {background-color: #28505D;}

#plane {position: absolute;top: 20%;}

.planePath {stroke: #D9DADA;stroke-width: .1%;stroke-width: .5%;stroke-dasharray: 1% 2%;stroke-linecap: round;fill: none;}

.fil1 {fill: #D9DADA;}

.fil2 {fill: #C5C6C6;}

.fil4 {fill: #9D9E9E;}

.fil3 {fill: #AEAFB0;}

svg {
  width: 50%;
  float: left;
}