CSS变换缩放后Safari上的模糊SVG答案

【问题标题】：Blurry SVG on Safari After CSS transform scalingCSS变换缩放后Safari上的模糊SVG
【发布时间】：2015-11-06 07:30:48
【问题描述】：

我有一个在网站上使用的 SVG 徽标。我已经对 SVG 应用了一些 CSS 转换以进行缩放和翻译。它可以完美地运行 Chrome 和 Firefox，但桌面和 iOS 的 Safari 在第二次转换后会呈现模糊的图像。 (Codepen link)

$('.click').click(function() {
  $('.svg').toggleClass('animated');
});

.svg {
  display: block;
  width: 10em;
  height: 10em;
  position: absolute;
  top: 0;
  left: 50%;
  background: url("http://blessing.micahmills.net/wp-content/themes/BlessingTourism/library/images/svg/BlessingLogo.svg") no-repeat top center;
  background-size: contain;
  opacity: 0;
  -webkit-transform: scale(3) translate(0, 50%);
      -ms-transform: scale(3) translate(0, 50%);
          transform: scale(3) translate(0, 50%);
  -webkit-transition: -webkit-transform .5s;
          transition: transform .5s;
  /*animation: scale .75s linear 2.5s forwards;*/
  -webkit-animation: logoFadeIn .75s linear .5s forwards;
          animation: logoFadeIn .75s linear .5s forwards;
}
.svg.animated {
  -webkit-transform: scale(1) translate(0, -1.75em);
      -ms-transform: scale(1) translate(0, -1.75em);
          transform: scale(1) translate(0, -1.75em);
}

@-webkit-keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me Twice</button>
<a href="#" class='svg'></a>

【问题讨论】：

标签： css svg safari transform

【解决方案1】：

所以这显然是 Safari 的一个错误。我找到了一种通过将比例更改为 scale3d 来解决它的方法。问题是 scale3d 可以达到的最大值是 (1,1,1)。所以基本上你必须从更大的尺寸缩小。

现在是代码

$('.click').click(function() {
  $('.svg').toggleClass('animated');
});

.svg {
  display: block;
  width: 10em;
  height: 10em;
  position: absolute;
  top: 0;
  left: 50%;
  background: url("http://blessing.micahmills.net/wp-content/themes/BlessingTourism/library/images/svg/BlessingLogo.svg") no-repeat top center;
  background-size: contain;
  opacity: 0;
  -webkit-transform: translate(-33%, 33%) scale3d(1, 1, 1);
      -ms-transform: translate(-33%, 33%) scale3d(1, 1, 1);
          transform: translate(-33%, 33%) scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform .5s;
          transition: transform .5s;
  /*animation: scale .75s linear 2.5s forwards;*/
  -webkit-animation: logoFadeIn .75s linear .5s forwards;
          animation: logoFadeIn .75s linear .5s forwards;
}
.svg.animated {
  -webkit-transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);
      -ms-transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);
          transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);
}

@-webkit-keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me Twice</button>
<a href="#" class='svg'></a>

【讨论】：

这样做会使 SVG 在 Firefox 中超级像素化。
这并没有解决我在 Safari 中的问题，我放大的 SVG 仍然模糊。
我可以为scale3d 使用大于 1 的数字，但结果仍然很模糊。因此，该解决方案可能只是有效，因为您按比例缩小并且与scale3d 无关。但这是浏览器的错，不是你的。顺便提一句。使用 zoom 创建了完美清晰的结果，但由于缺少变换原点，因此不标准且难以过渡。