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

如何在窗口更换时重新调整Raphael画布内的所有元素？

考虑下面的代码/ DEMO如果我重新调整我的窗口大小只调整div容器，因为我将其宽度设置为窗口宽度的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,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50,50,40);

解决方法

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

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

您可以阅读有关可以在svg preserveAspectRatio属性here上设置的值的更多信息，但可能感兴趣的三个值是’none'(用于压缩/拉伸以适合任何矩形)，’xMidYMid slice'(按比例)填充矩形，如果方面不匹配可能会剪掉某些部分)，’xMidYMid meet'(这是默认值，与完全没有指定pAR相同，意味着内容将居中并且会溢出一个如果方面不匹配则方向)。

原文地址：https://www.jb51.cc/jquery/181563.html