为什么在我使用比例尺时 SVG 路径会变得模糊？

Question

我的网站上有一个带有动画眼睛的 SVG。眼睛有一个用 transform: scale() 制作的眨眼动画。当我现在打开 Chrome 并且眼睛眨眼时，眼睛的路径有时会变得模糊。当我将网站缩放到 90% 时经常会发生这种情况，但它并不一致。我也尝试添加 translateZ(0) 和 backface-visibility: hidden; 但没有任何帮助。

我能以某种方式解决这个问题吗？

由于它不会一直发生，我不知道此代码段是否会显示我的问题。作为替代方案，我制作了一个 JSFiddle：https://jsfiddle.net/qnwj8uLm/

.info-eyes {
    animation-name: info-eyes;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    transform: scale(1) translateZ(0);
    transform-origin: 0% 75%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}
  
 
  .info-iris {
    animation-name: info-iris;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }

  @keyframes info-eyes {
    0%   {transform:scale(1, 1)   translateZ(0); }
    96%  {transform:scale(1, 1)  translateZ(0); }
    98%  {transform:scale(1, 0.1) translateZ(0); }
    100% {transform:scale(1, 1)  translateZ(0); }
  }
  
  @keyframes info-iris {
    0%   {transform: translate(0%, 0%); opacity: 100%;; }
    25%  {transform: translate(0%, 8%); opacity: 100%;} 
    50%  {transform: translate(8%, 8%); opacity: 100%;}
    75%  {transform: translate(8%, 8%); opacity: 100%;}
    96%  {transform: translate(0%, 0%); opacity: 100%;}
    98%  {transform: translate(0%, 0%); opacity: 0%;}
    100% {transform: translate(0%, 0%); opacity: 100%;}
  }

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
    <defs>
      <style>
        .a {
          fill: none;
        }

        .b {
          clip-path: url(#a);
        }

        .h {
          fill: #fff;
        }

      </style>
      <clipPath id="a">
        <rect class="a" width="81.7" height="75.3" />
      </clipPath>
    </defs>
    <g transform="translate(40.85 37.65)">
      <g class="b" transform="translate(-40.85 -37.65)">
        <path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
        <path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
      </g>
    </g>
  </svg>
</body>

Answer 1

问题可能源于浏览器优化。有一些可能的解决方案，例如 will-change: transform，但在我的浏览器中它在您的示例中不起作用。强制浏览器重绘的一种骇人听闻的方法是在缩放后立即添加一个 transform: translateZ(0)，这会弄乱数字：

.info-eyes {
    animation-name: info-eyes;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    
    transform: scale(1) translateZ(0);
    transform-origin: 0% 75%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}
  
 
  .info-iris {
    animation-name: info-iris;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }

  @keyframes info-eyes {
    0%   {transform:scale(1, 1)   translateZ(0); }
    96%  {transform:scale(1, 1)  translateZ(0); }
    98%  {transform:scale(1, 0.1) translateZ(0); }
    98.001%  {transform: translateZ(0); }
    100% {transform:scale(1, 1)  translateZ(0); }
  }
  
  @keyframes info-iris {
    0%   {transform: translate(0%, 0%); opacity: 100%;; }
    25%  {transform: translate(0%, 8%); opacity: 100%;} 
    50%  {transform: translate(8%, 8%); opacity: 100%;}
    75%  {transform: translate(8%, 8%); opacity: 100%;}
    96%  {transform: translate(0%, 0%); opacity: 100%;}
    98%  {transform: translate(0%, 0%); opacity: 0%;}
    100% {transform: translate(0%, 0%); opacity: 100%;}
  }

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
    <defs>
      <style>
        .a {
          fill: none;
        }

        .b {
          clip-path: url(#a);
        }

        .h {
          fill: #fff;
        }

      </style>
      <clipPath id="a">
        <rect class="a" width="81.7" height="75.3" />
      </clipPath>
    </defs>
    <g transform="translate(40.85 37.65)">
      <g class="b" transform="translate(-40.85 -37.65)">
        <path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
        <path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
      </g>
    </g>
  </svg>
</body>

Answer 2

我找到了解决问题的办法。我将眨眼关键帧从 transform:scale(1, 0.1) 更改为 transform:scale(1, 0.2)，现在动画效果很好。

片段：

.info-eyes {
    animation-name: info-eyes;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    transform-origin: 0% 75%;
}
  
 
  .info-iris {
    animation-name: info-iris;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }

  @keyframes info-eyes {
    0%   {transform:scale(1, 1) }
    96%  {transform:scale(1, 1) }
    98%  {transform:scale(1, 0.2) }
    100% {transform:scale(1, 1)  }
    
  }
  
  @keyframes info-iris {
    0%   {transform: translate(0%, 0%); opacity: 100%;; }
    25%  {transform: translate(0%, 8%); opacity: 100%;} 
    50%  {transform: translate(8%, 8%); opacity: 100%;}
    75%  {transform: translate(8%, 8%); opacity: 100%;}
    96%  {transform: translate(0%, 0%); opacity: 100%;}
    98%  {transform: translate(0%, 0%); opacity: 0%;}
    100% {transform: translate(0%, 0%); opacity: 100%;}
  }

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
    <defs>
      <style>
        .a {
          fill: none;
        }

        .b {
          clip-path: url(#a);
        }

        .h {
          fill: #fff;
        }

      </style>
      <clipPath id="a">
        <rect class="a" width="81.7" height="75.3" />
      </clipPath>
    </defs>
    <g transform="translate(40.85 37.65)">
      <g class="b" transform="translate(-40.85 -37.65)">
        <path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
        <path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
      </g>
    </g>
  </svg>
</body>

为什么在我使用比例尺时 SVG 路径会变得模糊？

Why does SVG Path get blurred when I use scale?

html

css

svg

google-chrome

css-animations