为什么SVG路径模糊时，我使用比例?

我的网站上有一个带有动画眼睛的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>

问题可能源于浏览器优化。有一些可能的解决方案，如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>

我找到了解决问题的方法。我将闪烁关键帧从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>

相关内容

最新更新

热门标签：