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

问题描述

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

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

我可以通过浏览器窗口调整纸张大小所有的矢量图形来调整它们的大小。任何反馈将不胜感激。

编辑

我尝试了一堆与此不同的路线。 viewBox工作很好，但它的SVG只。我只是想出了如何使用Raphael集和window.onresize事件上的一些代码。我会在今晚或明天晚些时候发表我的发现。我还是很想看看有没有其他解决方案。

解决方案

我花了一段时间，但我终于想出了解决这个问题的办法。我把解决方案包装在一个可以和Raphael一起使用的js文件中。您可以将js文件和一些简单的文档在这里。 查看。

工作原理：

1. 使用viewBox进行svg


2. 
   
3. 中的所有vml节点将Raphael构造函数包装起来，以便将vml组节点传递给Raphael构造函数
   
4. 修改几个css属性，当纸张调整大小，以处理中心，削减和维持正确的纵横比。
   

任何反馈将不胜感激。 / p>

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.

Note the way the above example resizes with the browser window

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.

EDIT

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.

解决方案

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.

How it works:

1. use viewBox for svg
2. wrap all vml nodes in a group node
3. wrap the Raphael constructor up so that the vml group node is passed to the Raphael constructor
4. alter a few css properties when the paper is resized to deal with centering, clipping and maintaining the correct aspect ratio.

Any feedback would be greatly appreciated.

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