Html 如何在Safari中正确调整SVG[标记在Chrome/Firefox中运行良好]

在下面的svg符号中，我试图根据屏幕大小调整它的大小，它在Chrome和Firefox中运行良好，但是在Safari中，无论屏幕大小，大小和位置似乎总是相同的，我在这里做错了什么，或者我应该更改什么

.c-btn-play{
最大宽度：80%；
身高：100%；
转化：translateY（15%）；
-ms转换：translateY（15%）；
-moz变换：translateY（15%）；
-webkit转换：translateY（15%）；
-o变换：translateY（15%）；
}
@包括mq（$from:tablet，$till:desktop）{
.c-btn-play{
浮动：对；
身高：85%；
}
}
@包括mq（$from:desktop，$till:wide）{
.c-btn-play{
身高：90%；
浮动：对；
保证金权利：10%；
}
}
@包括mq（$from:wide）{
.c-btn-play{
身高：120%；
浮动：对；
右边距：23%；
}
}