javascript - 将 .ai 或 .svg 文件放到网络上,不使用 Flash

标签 javascript dictionary svg vector-graphics adobe-illustrator

场景是这样的:我有一个 800kb 的 Adob​​e Illustrator 文件 -- 它是一个购物中心的俯 View ,每个商店都标有一些文本。显示面积、可用性和数字的元数据。

我如何以交互方式将其发布到网络上?我可以简单地将 PDF 导出到网络,但这不是很好的体验。我希望能够放大并查看详细信息(这是一个大商场),并且也许能够单击以发送有关单个空间的电子邮件或消息以进行查询。

如果是在 4-8 年前,自然的答案是 Macromedia 当然是 Adob​​e Flash!但我们现在处在一个人们希望在手机上看到这些东西的时代。

是否有可能以一种相当有效的方式来做到这一点?我尝试使用 svgweb 加载文件,但我的浏览器(任何浏览器)都卡住了,我想是因为文件的大小。

跨浏览器、可缩放和交互的 map 示例有哪些?

人们在该领域使用哪些工具或库取得了成功?感觉 GIS 工具在这里是值得的,但可能有点矫枉过正。

最佳答案

如果您想使用类似于谷歌地图的平铺方法,请查看 polymaps .

如果您的 svg 很大,那么以某种方式拆分它可能是个好主意,可以按细节级别/图层,也可以按图 block 。详细程度可以用 CSS media-queries 完成例如,但请注意,它本身不会使文件大小变小。然而,它应该对外观和感觉产生积极影响。

如果您想要一些应该在所有支持 svg 的浏览器中工作的简单缩放和平移控件 here's an example

关于javascript - 将 .ai 或 .svg 文件放到网络上,不使用 Flash,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5610285/

相关文章:

javascript - Angular/Javascript - 转换复杂对象的多个日期

javascript - 使用ES6的顺序迭代Promise

python - Python/mypy 中 NamedTuple 和 TypedDict 的主要区别是什么

javascript - 将 SVG 曲线拟合为多项式

javascript - 在 D3 中选择和移动导入的 SVG 文件

html - 如何自动将内联 svgs 定位到导航栏中?

javascript - 无法访问 React 组件内的查询字符串参数

javascript - 根据条件更改按钮的样式(使用 KnockoutJS)

python - 如何对dict元素求和

c# - 从值为 List<string> 的字符串中获取键