Html 使用悬停缩放时背景图像（svg）模糊的问题

我需要在悬停和对焦时放大图像。悬停在0.9到1之间，聚焦在1到1.2之间。 问题是缩放时，图片模糊。无论我开始的尺寸是0.9还是1。 我使用了两种解决方案：

transform: scale3d(.9, .9, .9);
transform: translateZ(0) scale (.9, .9);

但它不起作用（代码段中的解决方案）

我做错了什么？也许还有其他解决办法

。按钮{
边界：无；
背景色：透明；
背景大小：100%；
背景位置：中心；
背景重复：无重复；
背景图像：url（'https://svgshare.com/i/FWE.svg');
宽度：28px；
高度：36px；
过渡：变换。3秒缓和，背景。3秒缓和，不透明度。2秒缓和；
盒影：无；
改变：转变；
变换：scale3d（.9,9,9）；
变换：translateZ（0）比例（.9,9）；
}
.按钮：悬停{
光标：指针；
变换：scale3d（1,1,1）；
变换：translateZ（0）比例（1,1）；
}
.按钮：焦点{
大纲：无；
变换：scale3d（1.2,1.2,1.2）；
变换：translateZ（0）比例（1.2,1.2）；
}

---

您可以将图像放入一个伪元素并转换该元素的大小-这样您将始终保持清晰的svg（看起来比我们在评论中讨论的任何其他方式都清晰）：

。按钮{
光标：指针；
大纲：无；
边界：无；
宽度：36px；
高度：36px；
背景色：透明；
盒影：无；
位置：相对位置；
}
.按钮：之后{
内容：''；
显示：块；
背景：url（'https://svgshare.com/i/FWE.svg中-中不重复；
背景尺寸：包含；
宽度：26px；
高度：26px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
过渡：全部.15s线性；
}
.按钮：悬停：之后{
宽度：30px；
高度：30px；
}
.按钮：焦点：之后{
宽度：34px；
高度：34px；
}

---

您可以将图像放入一个伪元素并转换该元素的大小-这样您将始终保持清晰的svg（看起来比我们在评论中讨论的任何其他方式都清晰）：

。按钮{
光标：指针；
大纲：无；
边界：无；
宽度：36px；
高度：36px；
背景色：透明；
盒影：无；
位置：相对位置；
}
.按钮：之后{
内容：''；
显示：块；
背景：url（'https://svgshare.com/i/FWE.svg中-中不重复；
背景尺寸：包含；
宽度：26px；
高度：26px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
过渡：全部.15s线性；
}
.按钮：悬停：之后{
宽度：30px；
高度：30px；
}
.按钮：焦点：之后{
宽度：34px；
高度：34px；
}

由于它是一个svg，仅仅更改背景大小而不是使用缩放不是更好吗？类似这样：@Pete，很好的解决方案，但存在一个问题。如何解决这个问题？如果你设置实际图像的宽度而不是背景的宽度，看起来会更平滑一些？不幸的是，我不能将图片添加到html结构中，只能作为背景图像，但无论如何，这是一个svg，改变背景大小而不是使用比例不是更好吗？类似这样：@Pete，很好的解决方案，但有一个问题。如何解决这个问题？如果你设置实际图像的宽度而不是背景的宽度，看起来会更平滑一些？不幸的是，我不能将图片添加到html结构中，只能作为背景图片，但无论如何，谢谢