Hacker News Reader

An alternative solution to a viewbox property would be to use CSS transforms. It is a bit harder to work with, since you have to specify translation and scale instead of simply specifying the bounding box, but I don't think it is unreasonably hard.

See for example: https://jsfiddle.net/kuvodbax/1/

View on HN

Seems like a good javascript library could turn that into a viewbox like api.

Rather than converting viewbox-style bounds coordinates into translate/scale property values, it's probably better to use the matrix property (which is also part of CSS transforms).

The math is trivial, and the transformation matrix is conceptually much more powerful. You can start out with just the 2D zoom effect shown here, and then add rotation and even 3D transformations later while still using just one matrix.

(Full disclosure: contributor) We went with transforms for the svg-pan-zoom library [0], but it's interesting to compare using transforms vs. the viewBox [1].

[0] https://github.com/ariutta/svg-pan-zoom/blob/f84567bae1b80ac... [1] https://msdn.microsoft.com/en-us/library/gg589508%28v=vs.85%...

Reply on news.ycombinator.com