在悬停时使用比例尺时模糊背景图像（svg）的问题

Question

我需要在悬停和聚焦时放大图像。从 .9 悬停到 1，从 1 到 1.2 聚焦。问题是在缩放时，图片很模糊。无论我从什么尺寸开始，0.9 或 1。我使用了两种解决方案：

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

但它没有用（片段中的解决方案）。

我做错了什么？也许还有其他解决方案？

.button {
  border: none;
  background-color: transparent;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://svgshare.com/i/FWE.svg');
  width: 28px;
  height: 36px;
  transition: transform .3s ease, background .3s ease, opacity .2s ease;
  box-shadow: none;
  will-change: transform;
  transform: scale3d(.9,.9,.9);
  transform: translateZ(0) scale(.9, .9);
}

.button:hover {
  cursor: pointer;
  transform: scale3d(1,1,1);
  transform: translateZ(0) scale(1, 1);
}

.button:focus {
  outline: none;
  transform: scale3d(1.2,1.2,1.2);
  transform: translateZ(0) scale(1.2, 1.2);
}

<button class="button">
</button>
<button class="button">
</button>

Answer 1

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

.button {
  cursor: pointer;
  outline: none;
  border: none;
  width: 36px;
  height: 36px;
  background-color: transparent;
  box-shadow: none;
  position: relative;
}

.button:after {
  content: '';
  display: block;
  background: url('https://svgshare.com/i/FWE.svg') center center no-repeat;
  background-size: contain;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all .15s linear;
}

.button:hover:after {
  width: 30px;
  height: 30px;
}

.button:focus:after {
  width: 34px;
  height: 34px;
}

<button class="button">
</button>
<button class="button">
</button>

在悬停时使用比例尺时模糊背景图像（svg）的问题

Problem of blurring background image (svg) while using scale on hover

html

css

svg

css-transforms