我正在使用 Raphael 在页面上绘制一些形状。 <svg>
已设置为{ width:100%; height:600px }
效果很好。当我调整浏览器宽度时,我想调整 <svg>
内的形状以适应新的宽度。理想情况下,这应该自动发生;必须在 window.resize 上手动缩放每个形状和路径似乎是错误的。
我知道路径字符串中的百分比是非法的,但这本质上就是我想要做的:
var r = Raphael('container', '100%', 600);
r.path("M0,0 L0,0 55%,0 100%,61z")
最佳答案
您应该首先为纸张和路径使用绝对宽度和高度。您还需要使用 setViewBox()
在纸张上设置 viewBox。
从那里,您可以使用 CSS 将 div#container
的宽度设置为 100%。您可能还需要设置 body
和 html
如下:
body,
html {
margin: 0;
width: 100%;
}
关于javascript - 当 <svg> 改变大小时缩放路径和形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11140426/