像 SWF 一样缩放 SVG (Raphael.js) [英] Scaling SVG (Raphael.js) like an SWF

问题描述

几天前我开始使用 Raphael.js，我真的很喜欢它.我唯一无法弄清楚的是如何让paper"或 svg/vml 标签像 swf 一样填充浏览器窗口.看这个例子.

I started using Raphael.js a few days ago and I'm really enjoying it. The only thing I haven't been able to figure out is how to get the "paper" or svg/vml tag to fill the browser window like an swf. See this example.

注意上面例子随着浏览器窗口调整大小的方式

我能够使用浏览器窗口调整纸张"的大小，但没有运气让所有矢量图形调整它们的大小.任何反馈将不胜感激.

I was able to get the "paper" to resize with the browser window, but no luck getting all the vector graphics to adjust their size. Any feedback would be greatly appreciated.

编辑

我为此尝试了许多不同的路线.viewBox 效果很好，但只有 SVG.我只是想出了如何使用 Raphael 集和 window.onresize 事件上的一些代码来做到这一点.我将在今晚或明天晚些时候发布我的发现.如果有的话，我仍然很想看到这个问题的其他解决方案.

I tried a bunch of different routes with this. viewBox worked great but its SVG only. I just figured out how to do it using Raphael sets and a little code on the window.onresize event. I'll post my findings later tonight or tomorrow. I'd still really like to see other solutions to the question if there are any.

推荐答案

我花了一段时间，但我终于想出了解决这个问题的办法.我已经将解决​​方案包装在一个可以与 Raphael 一起使用的小 js 文件中.您可以在此处获取js文件和一些简单的文档.查看实际操作.

It took me awhile but I finally came up with a solution to this problem. I've wrapped the solution in a small js file that can be used with Raphael. You can get the js file along with some simple documentation here. See it in action.

工作原理:

1. 将 viewBox 用于 svg
2. 将所有 vml 节点包装在一个组节点中
3. 将 Raphael 构造函数包装起来，以便将 vml 组节点传递给 Raphael 构造函数
4. 在调整纸张大小时更改一些 css 属性以处理居中、剪切和保持正确的纵横比.

任何反馈将不胜感激.

这篇关于像 SWF 一样缩放 SVG (Raphael.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！