syncing pointer to SVG about perfect-freehand HOT 2 CLOSED

@Heydon I presume you're asking about scaling the drawing to always fit within the browser viewport. This is pretty easy, just define your dimensions in the SVG viewbox, and the browser will automatically scale your drawing.

For example, this isn't using the perfect freehand JS lib, but my solution is essentially what I've been using over here.

from perfect-freehand.

Heya, this isn't a perfect-freehand specific issue so I'm moving to discussions.

👉 But here's the fix: just remove the viewBox property!

Your example with just that line removed.

You never have to provide a viewBox to an <svg> element; and in most cases, I would suggest you don't provide one. If you styling an <svg> element with CSS and leave the viewBox off, then the browser will solve the coordinate space automatically—solving problems like the one you have here.

If you need to crop, zoom, etc, then I'd suggest transforming a <g> element rather than using the viewBox. (I've tried things both ways and the <g> approach is better.)

from perfect-freehand.