当前位置: 动力学知识库 > 问答 > 编程问答 >

html - SVG image / shape scaled up is blurry on transition

问题描述:

On Chrome, MacOs, I have this issue with SVG images and transition : when the graphic is animating, it becomes blurry.

On a project, it only happens on retina screens, but I did a jsfiddle that reproduce this issue : http://jsfiddle.net/0c2x7LaL/

<svg height="100" width="100" id="circle">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

</svg>

#circle {

transform: scale(1);

transition: transform 2s ease;

}

#circle:hover {

transform: scale(10);

}

It doesn't blur on Firefox, just on Chrome... Any idea ?

Updated JSFiddle

(with translateZ(0) and backface-visibility, still the same)

http://jsfiddle.net/0c2x7LaL/1/

网友答案:

When doing CSS animations Chrome seems to use the original size raster during the transitions.

One solution is to use SVG animations instead.

<svg height="1000" width="1000" id="circle">
  <circle cx="500" cy="500" r="40" stroke="black" stroke-width="3" fill="red">
    <animate fill="freeze" dur="2s" to="400" from="40" 
                  attributeName="r" begin="mouseover"/>
    <animate fill="freeze" dur="2s" to="40" from="400"
                  attributeName="r" begin="mouseout"/>
  </circle>
</svg>

Demo fiddle

If you want to stick with CSS animations, another solution would be to make the large size the "original". Then reverse the scaling operations.

#circle {
    transform: scale(0.1);
    transition: transform 2s ease;
}
#circle:hover {
    transform: scale(1);
}

Demo fiddle

Whether this is workable for you depends on your circumstances.

网友答案:

Instead of using CSS transform: scale();, I just converted it to width.

In this case (img with SVG) :

img {
    width: 300px;
    transition: width 2s ease;
}
img:hover {
    width: 10000px;
}

DEMO : http://jsfiddle.net/0c2x7LaL/4/

分享给朋友:
您可能感兴趣的文章:
随机阅读: