无法使用 SVG.js 在原点绘制。可能在 .viewBox() 调用中做错了什么？

【问题标题】：Can't draw at origin with SVG.js. Possibly doing something wrong in .viewBox() call?无法使用 SVG.js 在原点绘制。可能在 .viewBox() 调用中做错了什么？
【发布时间】：2020-07-11 08:43:41
【问题描述】：

创建 SVG 元素：

var draw = SVG('drawing').size(window.innerWidth, window.innerHeight);
draw.viewbox(0, 0, 100, 100);

我认为问题出在某个地方。当我尝试稍后在 x=0 处绘制一个点时，

var line = draw.line(0, 0, 100, 100).stroke({ width: 1 })

如下图所示，它向右上方画了大约 40 个点。

【问题讨论】：

标签： javascript svg viewbox svg.js

【解决方案1】：

你的 viewBox 是“0 0 100 100”。那是一个正方形的形状。但它的容器似乎是oblong。那么你的绘图应该如何显示呢？

默认情况下，如果您指定一个 viewBox，则保留纵横比（正方形），这意味着您看到整个绘图区域仍然是长方形内的正方形，这样长方形的最小边就是正方形的大小，并且在那里因此是最长边两侧的间隙。

如果您不希望这样，可以通过设置preserveAspectRatio property 来选择各种替代方案。

【讨论】：