Firefox에서 CSS 애니메이션 전후에 SVG가 흐리게 처리됩니다.

CSS 변환을 사용하여 SVG 로고의 일부분에 애니메이션을 적용하고 싶습니다. 애니메이션이없는 동안 SVG가 완벽하게 렌더링되고 모든 것이 맑은 것처럼 보입니다.Firefox에서 CSS 애니메이션 전후에 SVG가 흐리게 처리됩니다.

그러나 애니메이션 지연 및 애니메이션 완료 후 fill 상태에서, firefox는 그래픽의 애니메이션 부분을 완전히 흐리게 만듭니다.

문제는 Mac 및 Windows 시스템에서 Mozilla Firefox에서만 발생합니다. 크롬과 사파리에서는 의도 한 것처럼 보입니다. 내가 설명 할 수있는 SVG 코드 최소화 한

#gull { 
 
    fill: #59E9CF; 
 
    -webkit-animation: gull-flight 5s linear 3s 1 normal both; 
 
    -moz-animation: gull-flight 5s linear 3s 1 normal both; 
 
    animation: gull-flight 5s linear 5s 1 normal both; 
 
    } 
 
    @keyframes gull-flight { 
 
    0% { 
 
     transform: matrix(0.976, -0.216, 0.216, 0.976, -9.5, 71.6); 
 
     fill: #404041; 
 
    } 
 
    100% { 
 
     transform: matrix(1, 0, 0, 1, 0, 0); 
 
    } 
 
    } 
 
    @-webkit-keyframes gull-flight { 
 
    0% { 
 
     transform: matrix(0.976, -0.216, 0.216, 0.976, -9.5, 71.6); 
 
     fill: #404041; 
 
    } 
 
    100% { 
 
     transform: matrix(1, 0, 0, 1, 0, 0); 
 
    } 
 
    }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 808 138" version="1.1"> 
 
    <path d="M11.0944925 129.4 L11.0944925 23.2 C11.0944925 20.3 9.6 18.8 6.5 18.7 L-0.00275138279 18.3 L-0.00275138279 3 L32.5369357 3 L32.5369357 46.8 C38.0855577 41.7 45.5 39.1 54.9 39.1 C66.4981706 39.1 75.7 43 82.5 50.8 C89.2337637 58.7 92.6 69.7 92.6 83.9 C92.6271358 119.5 77.7 137.3 47.9 137.3 C41.4789298 137.3 34.7 136.6 27.6 135 C20.5592493 133.5 15 131.6 11.1 129.4 M32.5369357 69.4 L32.5369357 117.4 C37.2234577 119.8 42.6 121.1 48.8 121.1 C62.8663453 121.1 69.9 109.6 69.9 86.8 C69.8915427 66 63 55.5 49.2 55.5 C44.743904 55.5 40.9 56.8 37.5 59.4 C34.2061079 62 32.5 65.3 32.5 69.4" 
 
    /> 
 
    <path d="M150.264937 17 C157.180079 18.5 161.5 22.4 163.2 28.6 C164.333674 32.6 164.6 37.6 164 43.5 L176.008708 55.3 L191.517336 49.9 C193.470818 44.1 196 39.6 199.3 36.2 C203.705962 31.6 209.4 30.1 216.3 31.7 C220.80122 32.7 224.2 34.7 226.5 37.6 L245.88466 30.8 C243.912835 28.4 241.4 25.9 238.4 23.6 C233.87946 20.1 228 17.6 220.8 16 C210.465192 13.7 200.3 14.8 190.3 19.4 C188.123964 20.5 186 21.9 184 23.5 C183.510812 22.1 182.9 20.8 182.2 19.6 C180.099097 15.9 176.8 12.4 172.3 8.9 C167.855444 5.4 162 2.9 154.8 1.3 C144.441176 -1 134.3 0.1 124.3 4.7 L137.938742 18.1 C141.478854 16.3 145.6 15.9 150.3 17" 
 
    id="gull" /> 
 
</svg>

: 문자 'B'을 '갈매기'가 처음 흐리게하는 동안, 이동할 때 다음 날카로운 날카로운 남아 있으며 애니메이션 후 다시 흐리게합니다. (힌트 : 전체 화면 모드로 재생하여 무슨 뜻인지 알 수 있습니다.)

이것에 대한 의견이 있으십니까?

출처

2014-09-02 Peter Sorowka

방금 파이어 폭스 35를 사용해 보았는데, 나에게 완벽 해 보였다. 마지막 버전에서 해결되었을지도 모르겠다. –

저는 이것이 현재 빌드의 한계에 불과하다고 생각합니다. webGL이나 기타 가장자리 물건처럼 - 브라우저는 아직 잘하지 못합니다. 실제로 해결할 수있는 것이 아니라 당신이 해결해야 할 부분입니다. 이후 빌드에서 반올림 될 때까지 (아무런 보장도 없다는 것에주의하십시오.) - 변형 Z 해킹을 시도하거나, 또는 모더니져로 테스트해볼 수 있습니다. 멋지다.

출처

2015-02-09 15:49:43

Firefox에서 CSS 애니메이션 전후에 SVG가 흐리게 처리됩니다.

답변

관련 문제