Html 放大时safari出现svg问题

我有一个svg，它使用一些像素值（cx、cy、r）。当我在Safari中打开它并执行cmd+“+”或cmd+“-”时，一切都乱七八糟。我不知道怎么解决这个问题。这个问题不会发生在Chrome上

当执行这两个操作之一时，这些样式的计算值将发生更改。我不想让他们改变

正文{
背景色：黑色；
}
.集装箱{
宽度：28%；
身高：28%；
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}
.圆圈{
变换原点：中心；
}
.圆圈-1{
变换：旋转（0度）平移（0度）；
阵列：220；
行程偏移：20；
}
.圆圈-2{
变换：旋转（540deg）平移（0）；
行程：176；
行程偏移：20；
}
.圆圈-3{
变换：旋转（72度）平移（0）；
阵列：132；
行程偏移：30；
}

你找到解决方案了吗？没有，我不得不使用png，但我仍然很好奇如何解决这个问题，因为我不喜欢在这个问题上使用png