Firefox에서 SVG 렌더링이 잘못되었습니다.

FF에서 SVG의 버그가 해결되었지만 SVG가 Firefox에서 pixelated로 표시됩니다. 슬라이더 회전기 <li>을 사용하여 인포 그래픽으로 작업하고 있습니다. 누구든지이 문제를 볼 수 있습니까?Firefox에서 SVG 렌더링이 잘못되었습니다.

URL : http://weaver-wp.weavertest.com/radiation-infographic/

출처

2011-04-11 SixtySticks

fyi - 왼쪽면의 앨리어싱을 의미하는 경우 Chrome에서 동일한 문제가 발생하므로 Firefox 관련 버그 일 수 없습니다. SVG는 무엇으로 만들었습니까? – tamarintech

Safari에서도 확인되었습니다. – Blender

@esnyder Adobe Illustrator. SVG를 생성하는 데 사용할 수있는 더 나은 도구가 있습니까? – SixtySticks

당신은 매우 큰 크기로 SVG 파일을 확대됩니다

background-size: 9730px 30000px; 
background-position: -7310px -29250px;

대부분의 브라우저하지 않습니다 앤티 앨리어싱 매우 큰 SVG 모양, 너무 많은 그래픽 메모리를 필요로한다. (이것은 Safari와 Chrome에서 볼 수 있습니다.) Firefox는 실제로 SVG를 캔버스 크기로 렌더링 한 다음 잘린 영역에 이미지 보간을 사용하여 이미지를 보냅니다.

두 픽스 모두 동일합니다.
자르기 SVG를 먼저 자른 다음 자른 부분 만 배경으로 사용하십시오.

출처

2011-04-11 16:56:47 Phrogz

나는이 대답을 좋아합니다. OP가 돌아 왔음을 기억하고 해결책인지 여부를 알려주세요. – tamarintech

배경 포즈/줌의 좌표를 계산하는 데 꽤 오랜 시간이 걸렸기 때문에 SVG를 자르기를 주저합니다. 게다가, 나는이 SVG와 마찬가지로 약간의 깊이에서 벗어난다. 명확히하기 위해, 당신은 SVG를 더 작은 덩어리들로 썰어서 어떻게 든 연결하는 것을 제안하고 있습니까? – SixtySticks

@Dalogi 내가 말할 수있는 한, SVG의 작은 하위 섹션을 캔버스의 배경 이미지로 사용하는 것처럼 보였습니다. 아마도 당신이 뒤로 물러나서 당신이 이루고자했던 시각 효과와 당신이 지원해야하는 브라우저에 대해 설명해 주었다면 제 제안이 바뀔 수도 있습니다. – Phrogz

패닝/동물원 출현시 요소의 속성 viewbox을 사용하십시오. 훨씬 더 높은 성능과 사용하기 쉽습니다.

출처

2012-01-19 03:46:31

Firefox에서 SVG 렌더링이 잘못되었습니다.

답변

관련 문제