Html 使用SVG动画制作按钮

我正在制作一个带有几个按钮的标题，其中包括一个动画悬停效果。当全尺寸观看时，它们看起来不错，但当屏幕变小时，它会完全扭曲并破坏效果

有没有办法让整个div和其中的所有内容按比例缩放

.svg包装器{
边际上限：0；
位置：相对位置；
显示：内联块；
边界半径：3px；
对齐：居中；
}
#形状{
对齐内容：居中对齐；
笔划宽度：6px；
填充：透明；
冲程：#fb9715；
行程：85400；
行程偏移：-220；
过渡：1秒都轻松；
}
#正文{
边缘顶部：-42px；
文本对齐：居中；
颜色：黑色；
}
a{
颜色：黑色；
字号：8pt；
}
.svg包装器：悬停#形状{
笔划数组：50 0；
笔画宽度：3px；
笔划偏移：0；
冲程：#fb9715；
}

您的代码中有一些错误：

在svg元素中，不能使用html标记

对于可以在SVG中使用

的文本，有一个

欢迎使用堆栈溢出！你的HTML有错误。这就是您的环境中存在的问题，还是仅此而已？在人们帮助你之前，你应该先解决这些问题。（您在

上没有结束标记）谢谢！这很有帮助。