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

标签 javascript browser svg

SVGPath.getBBox() 至少在 WebKit 中的实现看起来有些粗制滥造;是否有比走路径(或随机反复采样)、手动计算其可能的边界框以获得良好读数更好(更便宜)的方法?

http://bl.ocks.org/2939938 (或 https://gist.github.com/2939938 )显示了后者的示例,当我在几个不同的相当现代的浏览器中运行它时, native 实现存在显着差异。 Opera 最好,Firefox 好,而 Chrome/Safari 视觉效果特别差:

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> 的情况具体元素;它看起来在代数上是精确的,而且速度很快。添加到对比测试页。

关于javascript - SVG:获取路径的精确边界框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11061114/

相关文章:

javascript - 我的 JavaScript 路由出现 404 错误

javascript - 第二次选择时 Select2 显示 "No result found"消息

javascript - 解析巨大的json数据

firefox - 我该怎么办 : Enter username and password for "" at http://localhost in Firefox browser?

javascript - 如何在 Vue 组件内创建圆形进度条

javascript - 两人 - 回合制游戏

javascript - 浏览器忽略中间人 content_for 添加的 JavaScript

javascript - 在浏览器中后退和前进时保留 Javascript 更改

css - 增加 svg 文本中的垂直空间

ios - 不变违规 : Native component for "RNSVGSvgView" does not exist