SVG/VML vs 캔버스 vs HTML - 모바일

Question

표시/변경된 색상과 onclick (모바일) mouseover (바탕 화면) 이벤트가있는 매우 간단한지도를 작성하고 있습니다. 목적. 나는 다음을보고있다.

1. 캔버스
2. SVG/VML
3. JS/HTML

하지만 내 문제는 내가 어떻게 든

1. IE (7-10)
2. 크롬을 지원할 필요가있다
3. 파이어 폭스
01 23,516,
4. 블랙 베리 6-7
5. 윈도우 모바일 7 (IE9)
6. 아이폰 OS
7. 안드로이드 2.3 (아무 SVG)

그리고 모두를 지원할 수있는 하나의 시스템을 찾을 수 없습니다 안드로이드는 SVG를 지원하지 않으며, 모바일 브라우저는 캔버스에서 매우 느린 것처럼 보이고, IE 7-8은 캔버스를 지원하지 않으며, HTML은 이미지를 사용하지 않고 "셰이프"를 지원하지 않으며 이미지를 스와핑해야합니다. 시각적으로 좋지는 않을 것입니다 ... yada yada yada ...

내가 이것들을 위해 한 번 만들 수있는 아이디어가 있습니까? Canvas (모바일) & SVG (바탕 화면)를 사용하는 것이 더 나을 것이라고 생각했습니다. 하지만 모바일을 테스트 할 때 캔버스는 대단히 느린 것 같습니다.

도움이되는 도서관이나 시스템이 있습니까?

Answer 1

그리고 잘 일이없는 그

을 모두 지원할 수있는 하나의 시스템을 찾을 수 없습니다.

이동식 div를 사용하거나 앱의 두 가지 버전을 만들어야합니다. 죄송합니다.

캔버스가 느리지 만 일부 모바일이 느립니다. 캔버스는 (거의) 항상 DOM보다 빠르지 만, 그렇게 유지하려면 당신에게 달려 있습니다. 정확히 어떤 코드를 테스트 했습니까?

Answer 2

당신이 접근 할 수있는 방법 중 하나는 응용 프로그램에서 물건을 그리는 데 사용한 인터페이스를 만들고 두 가지 다른 렌더러 개체 (SVG를 사용하는 IE7 ~ 8)와 다른 모든 개체에 Canvas를 사용하는 인터페이스를 만드는 것입니다. 당신이 IE7-8 필요한 경우

Answer 3

1. 당신은 단지 거기에 그래픽 모드를 지원, VML을 사용해야합니다.
2. iOS를 고려한 후에 Canvas를 사용해야 할 경우 iPad에서 SVG보다 10 배 이상 빠릅니다.
3. Canvas는 기본 Android 2.x 브라우저에서만 사용할 수있는 그래픽 mdoe입니다.
4. 지도가 지원되는 줌 및 크기가 필요하면 3000px를 초과하면 캔버스가 작동하지 않으므로 SVG를 사용해야합니다.