我最近问了一个关于使用百分比和转换来扩展SVG / Raphael JS布局以适应整个屏幕的问题。我没有完全意识到，SVG（或者至少是Raphael）从中心扩展，这是不好的。这使得在尝试对齐各种元素时看起来有些奇怪。
我的设计目标是创建一个1280 x 720的基本布局，让它自动检测屏幕分辨率以适应高度并保持其高宽比。重要内容适合中间，如果宽度太小，可以滑入或滑出两个面板，或者其他任何内容（需要稍后处理）。
我正在考虑的解决方案（我还没有真正测试过），几乎忽略了element.transform（），并创建了一个自定义缩放功能。在某个地方，每个元素都需要一个额外的属性来缩放（例如，右下角，顶部等）。并且，该元素将使用新维度重新绘制。将“锚点”设置为顶部的元素会将一个像素移动到顶部和左侧，并一次向右扩展一个像素。或类似的东西。至于文本，我只是考虑使用字体大小的百分比。
所以，在我开始修补之前，我的问题是，有没有基于SVG的javascript库，他们已经内置了这个功能？我在看Snap，svg.js和D3（我根本不懂），但我找不到任何相关内容。或者拉斐尔有些遗漏的东西吗？
或者，也许我在考虑这个问题并且错了？