Search code examples
javascriptsvgviewboxsvg.js

Can't draw at origin with SVG.js. Possibly doing something wrong in .viewBox() call?

Creating the SVG element:

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

I think the issue is somewhere there. When I try and later draw a point at x=0,

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

It draws it about 40 points over to the right as in the following image.enter image description here

Solution

  • Well your viewBox is "0 0 100 100". That's a square shape. But its container appears to be an oblong. So how should your drawing be displayed?

    By default if you specify a viewBox the aspect ratio (squareness) is preserved that means that you see the whole drawing area still as a square within your oblong such that the smallest side of the oblong is the size of the square and there are therefore gaps on either side of the longest side.

    If you don't want this there are various alternatives that can be chosen by setting the preserveAspectRatio property.