SVG 图像在使用 css 变换移动时变得模糊和闪烁
Posted
技术标签:
【中文标题】SVG 图像在使用 css 变换移动时变得模糊和闪烁【英文标题】：SVG Image gets blurry and flickers when using css transform to move 【发布时间】：2017-06-03 12:10:04 【问题描述】：如何避免使用 CSS 变换时出现图像模糊/闪烁问题？我尝试了来自CSS transition effect makes image blurry / moves image 1px, in Chrome? 的一系列建议，但似乎无法弄清楚。
我在下面附上了 plunker 代码。
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
index.html
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img src="usequities_green.svg" class="sample_fixed_income">
<section class="sectors">
<div class="container index-container-responsive">
<div class="row">
<div class="sectors-icon">
<img src="usequities_green.svg" class="sectors-icon-container fixed_income">
</div>
</div>
</div>
</section> </body>
</html>
style.css
/* Styles go here */
.sectors
background-color: #30B784;
color: white;
display: flex;
height: 680px;
align-items: center;
justify-content: center;
position: relative;
.sectors__section__title
font-size: 32px;
line-height: 48px;
.sectors-icon .sectors-icon-container
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: white;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 0 10px 40px 0 rgba(23, 28, 33, 0.13), 0 31px 13px 0 rgba(23, 28, 33, 0.05);
opacity: 1;
transition: margin 0s cubic-bezier(0.2,0.6,0.3,1), opacity 0s ease;
@keyframes floating_fixed_income
0%
transform: translate(0%,0%);
12.5%
transform: translate(-2%,1%);
25%
transform: translate(-4%,2%);
50%
transform: translate(-2%,3%);
62.5%
transform: translate(0%,2%);
75%
transform: translate(1%,1%);
100%
transform: translate(2%,0%);
.sectors-icon-container.fixed_income
animation-name: floating_fixed_income;
animation-duration: 5s;
height: 112px;
background-size: 112%;
width: 112px;
margin-left: 73%;
margin-top: -11%;
【问题讨论】：
我也有同样的问题 【参考方案1】：我认为这是一个错误。不那么整洁，但我的建议是现在只为绝对定位的元素设置动画。您可以将您的sectors-icon 定位在您想要的位置，给它relative 定位，然后使用absolute 定位将悬停动画添加到它的子img：
@keyframes floating_fixed_income
0%
top: 0;
12.5%
top: 20px;
25%
top: 10px;
50%
top: 100px;
62.5%
top: 50px;
75%
top: 20px;
100%
top: 0;
https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview
【讨论】：
以上是关于SVG 图像在使用 css 变换移动时变得模糊和闪烁的主要内容，如果未能解决你的问题，请参考以下文章