SVG:获取路径的精确边界框

SVG: getting a precise bounding box of a path?

本文关键字：边界 获取 路径 SVG      更新时间：2023-09-26

至少WebKit中的SVGPath.getBBox()实现似乎有些劣质;有没有比走路径（或随机一遍又一遍地采样）更好（更便宜）的方法，手动计算其可能的边界框，以获得良好的读数？

http://bl.ocks.org/2939938（或 https://gist.github.com/2939938）展示了后者的示例，当我在几个不同的相当现代的浏览器中运行它时，本机实现存在显着差异。Opera是最好的，Firefox是好的，Chrome/Safari ocular - 明显不好：

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

事实证明，Raphael.js 实现了相当优秀的 Raphael.pathBBox，专门针对您有一个 <path> 元素的情况; 它似乎在代数上精确，而且速度很快。添加到比较测试页面。

相关文章：