当<svg>更改大小时缩放路径和形状

Scale paths & shapes when <svg> changes size

本文关键字：路径 缩放 小时 svg      更新时间：2023-09-26

我正在使用Raphael在页面上绘制一些形状。<svg>已设置为{ width:100%; height:600px }，并且工作正常。当我调整浏览器宽度时，我想调整<svg>内的形状以适应新的宽度。理想情况下，这应该自动发生;必须在 Windows.resize 上手动缩放每个形状和路径似乎是错误的。

我知道路径字符串中的百分比是非法的，但这本质上是我想做的：

var r = Raphael('container', '100%', 600);
r.path("M0,0 L0,0 55%,0 100%,61z")

您应该首先对纸张和路径使用绝对宽度和高度。您还需要使用 setViewBox() 在纸张上设置视图框。

从那里，您可以使用 CSS 将div#container的宽度设置为 100%。您可能还需要设置body和html：

body,
html {
margin: 0;
width: 100%;
}
相关文章：