时间戳

首页 > 解决方案 > 无法使用 SVG.js 在原点绘制。可能在 .viewBox() 调用中做错了什么？

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

问题描述

创建 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 个点。在此处输入图像描述

标签： javascriptsvgviewboxsvg.js

解决方案

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

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

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

推荐阅读