2014-05-24 1 views
0

내 사이트는 background-size가 100 % 인 배경 이미지로 구성된 하나의 div로 구성됩니다. 컨테이너 자체의 너비는 100 %이고 밑면 패딩은 10 %입니다. 이해가 안되는 것은 내 SVG가 비 벡터 이미지로 변환되는 이유입니다. 크기가 커지면 정말 끔찍해 보입니다. 나는 백분율이 아닌 값을 사용하여 시도했지만 그 중 하나도 작동하지 않습니다. preserveAspectRatio도 중요하지 않습니다.Firefox : 필터가있는 SVG 배경 이미지가 래스터 화/흐리게 처리됩니다.

이미지 인라인을 img로 사용하면 완벽하게 작동하지만 svg 스프라이트 배경 위치에 애니메이션을 적용하려고합니다.

정직하게 조언이 필요합니다. 해결 방법이 있습니까?

+0

도움이 될 수 있습니다. http://stackoverflow.com/questions/14171475/svg-image-blurry-at-specific-zoom-levels-in-chrome/14171613#14171613 – K3N

+0

@Epistemex 기사 그러나 저를 위해 작동하지 않는다. 나는 부모 요소가 없다. 난 그냥 내 요소 이미지를 가지고 1 요소/div/클래스를 사용합니다. 고정 크기로 설정하려고했습니다. 그래도 Illustrator에서 그림자를 제거하면 문제가 해결된다는 것을 알게되었습니다. 왜 확실하지 않은 Im. 여하튼 필터는이 문제를 유발하지만 당연히 그것을 지키고 싶습니다. – Demorus

+0

우리가 무슨 일이 일어나는지 볼 수 있도록 바이올린을 만드십시오. 혼자의 설명만으로는 문제를 진단하기에 충분하지 않습니다. –

답변

0

일러스트 레이터로 이동하여 포토샵에서 만든 그림자를 추가하십시오. 이런 식으로 그림자 이외의 모든 것은 svg가되어 하이브리드 svg 파일이됩니다. 완벽하게 작동합니다.)

관련 문제