3 ms·
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 i
by reipahb 11y ago
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/ https://jsfiddle.net/kuvodbax/1/
- mistercow 11y agoSeems like a good javascript library could turn that into a viewbox like api.
- pavlov 11y agoRather 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.
- andersriutta 11y ago(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/f84567bae1b80ac000af06306011e18728af487f/src/svg-pan-zoom.js#L247 https://github.com/ariutta/svg-pan-zoom/blob/f84567bae1b80ac... [1] https://msdn.microsoft.com/en-us/library/gg589508%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us/library/gg589508%28v=vs.85%...