SVG : 경로의 정확한 경계 상자를 가져 오는 중입니까?

적어도 WebKit에서 SVGPath.getBBox() 구현은 약간 외설적 인 것처럼 보입니다. 경로를 걷는 것 (또는 무작위로 반복해서 샘플링하는 것)보다 좋은 (값싼) 방법이 있는가, 가능성있는 경계 상자를 수동으로 계산하여 좋은 읽을 거리를 얻는 것입니까?SVG : 경로의 정확한 경계 상자를 가져 오는 중입니까?

http://bl.ocks.org/2939938 (또는 https://gist.github.com/2939938)은 후자의 예를 보여 주며, 상당히 다른 최신 브라우저에서 실행하면 네이티브 구현이 현저히 다릅니다. 오페라, 최고 파이어 폭스 좋은 크롬/사파리는 안구 특히 나쁜 :

는

616.1572 677.0540 127.6856 126.8793 - sampled, gathering random coords for 5s (reference) 
616.1569 677.0538 127.6860 126.8796 - opera 11.64 build 1403 
616.1563 677.0547 127.6875 126.8789 - firefox aurora 15.0a2 (2012-06-15) 
614.2805 673.9761 136.2089 129.9573 - chrome canary 21.0.1176.0 
614.2805 673.9761 136.2089 129.9573 - safari 5.1.7 (7534.57.2)

또는 퍼센트의 기준 경계 상자에서 왼쪽/위쪽/너비/높이 변화 :

0.00005% 0.00003% 0.00031% 0.00024% - opera 
0.00015% 0.00010% 0.00149% 0.00032% - firefox 
0.30458% 0.45460% 6.67522% 2.42593% - chrome 
0.30458% 0.45460% 6.67522% 2.42593% - safari

출처

2012-06-16 ecmanaut

경계 상자를 사용할 대상과 분석 할 경로의 종류를 지정하면 적절한 솔루션이나 더 나은 근사값을 제안하는 데 도움이 될 수 있습니다. –

현재 나의 주요 관심사는 링크 된 예제에서와 같이 단일 경로 요소 SVG : s에 대한 정확한'viewBox' 속성을 도출하는 것입니다.이 예제에서는 그래픽을 완벽하게 맞추기 때문에 잘라내 기와 여분의 패딩없이 크기가 조절됩니다. – ecmanaut

그것은 밝혀 Raphael.js은 특별히 <path> 요소가있는 경우에 매우 우수한 Raphael.pathBBox을 구현합니다. 그것은 대수적으로 정확하고 빠르다. 비교 테스트 페이지에 추가되었습니다.

출처

2012-07-09 05:20:11 ecmanaut

질문에 링크 된 코드에 따르면 파이어 폭스의 기본 getBBox는 이제 라파엘만큼 정확하지만 Chrome은 여전히 몇 픽셀 떨어져 있습니다. – Yay295

SVG : 경로의 정확한 경계 상자를 가져 오는 중입니까?

답변

관련 문제