Search code examples
svgcoordinatesviewbox

svg viewbox scaling issue


I've a question about svg's viewbox, in my opinion it's like a window on an infinite svg plan, and its boundaries are set in the viewBox attribute of the svg element. It represents the rectangle between the 2 coordinates in the svg plan. So a viewBox of "0 0 1000 500" shows the window between (0,0) and (1000,500) of the svg plan. And when I make viewBox (2000, 0, 3000 500) i see the window of (2000,0) and (3000,500). x and y scaling is unmodified: in both cases i'm displaying 1000 * 500 units of the svg plan.

But apparantly i go wrong some where. I'm experimenting with animating the viewbox to emulate some kind of ticker display, leaving the y coordinates untouched but changing the x coordinates (without changing the actual number of units displayed) but that goes wrong. Somehow my y-scaling changes. In a modern browser you can verify yourself (pull the slider to change the viewBox). What did I miss in the SVG specification?


Solution

  • You missed the preserveAspectRatio attribute in the SVG specification. It forces the aspect ratio of what you see in the viewbox to be preserved by default. Sounds like what you're after is preserveAspectRatio="none"