当 <svg> 改变大小时缩放路径和形状答案

【问题标题】：Scale paths & shapes when <svg> changes size当 <svg> 改变大小时缩放路径和形状
【发布时间】：2012-06-21 14:29:22
【问题描述】：

我正在使用 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")

【问题讨论】：

打电话给 Dmitry Baranovskiy？
@AshwinGanesh 为什么我没想到？！你有他的号码吗？ :)
也许this topic 与您的问题有关？
@raina77ow 这看起来很有希望。我会检查一下。谢谢。
@Jeff，国际电话 - Adobe 澳大利亚 - 接线员 - Dmitry :P 开个玩笑。我遇到了类似的问题onresize，最终编写了单独的缩放函数。我已经在网上搜索了很多。没什么前途。不过，raina77ow 的建议似乎很有趣。

标签： javascript html svg raphael

【解决方案1】：

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

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

body,
html {
margin: 0;
width: 100%;
}

【讨论】：