我如何使用jquery在窗口调整大小上缩放Raphael js元素

Question

如何Raphael在窗口更改时重新缩放画布内的所有元素？

考虑下面的代码/ DEMO如果我重新div container调整我的窗口大小只是缩放,因为我将其宽度设置为窗口宽度的50%而没有(rect,circle或path)更改

码

<div id="container"></div>?
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}?
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

​

Answer 1

如果您使用Raphaël2.0或更高版本,则可以选择调用paper.setViewBox来设置坐标系,然后让浏览器自动处理调整大小.

更新:好的,事实证明Raphaël的自动缩放程度比我想象的要少......无论如何,这是一个例子(raphaël仍然在根<svg>上设置绝对宽度/高度,所以它们需要被删除才能正常svg缩放发生).然后由CSS决定大小,svg恰好适合给定的区域.可以调整这个以处理溢出的内容,这可能是由于svg viewBox的纵横比与它所放置的CSS框不匹配而发生的.您可以通过向preserveAspectRatio根svg元素添加属性来完成此操作.

你可以阅读更多您可以在SVG设置的值preserveAspectRatio属性在这里,但是这三个值是可能感兴趣的是'none'(用于挤压/拉伸,以适应任何RECT给出), 'xMidYMid slice'(扩展到填充rect,可能是剪辑如果方面不匹配则离开某些部分),'xMidYMid meet'(这是默认值,与完全不指定pAR相同,意味着内容将居中,如果方面不匹配,将在一个方向溢出).

Answer 2

http://jsfiddle.net/vnTQT/

    var paper = Raphael("wrap");
    paper.setViewBox(0,0,w,h,true);
    paper.setSize('100%', '100%');

将此(paper.setViewBox)与paper.setSize('100%','100%')一起使用并调整窗口大小,调整svg内容的大小,而不使用svg函数.