Невозможно нарисовать в оригинале с SVG. js. Возможно, что-то не так в вызове .viewBox ()?

Question

Создание элемента 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 })

Это д-р aws, это примерно на 40 точек вправо, как на следующем изображении.

Answer 1

Ну, ваш viewBox "0 0 100 100". Это квадратная форма. Но его контейнер выглядит как продолговатый . Итак, как должен отображаться ваш рисунок?

По умолчанию, если вы укажете viewBox, соотношение сторон (прямоугольность) будет сохранено, что означает, что вы видите всю область рисования в виде квадрата внутри продолговатой формы, так что наименьшая сторона продолговатое - это размер квадрата, и поэтому с каждой стороны от самой длинной стороны есть пробелы.

Если вы не хотите этого, есть различные альтернативы, которые можно выбрать, установив preserveAspectRatio свойство .