Search code examples
svgtransformationtranslate

SVG: Understanding the Translate command


From what I understand, the SVG Translate transformation offsets the coordinates by a given X and a given Y. So if drawing something at (80,100) and applying a translate(-10,-10) would draw the object at (70,90).

That being said, I have an SVG file that has a page width of 744 by 1052. One of the groups tag applies a transformation of translate(-5774.2676,3117.0866). What I'm trying to understand is how this is not completely off the entire page (which it isn't). Can someone help me to figure this out?


Solution

  • I have created a fiddle http://jsfiddle.net/JNqDY/. Also explanations are give in the fiddle. In short, we can draw objects at coordinates that are not visible in viewport (outside the viewport). We can then bring such objects that are drawn outside the viewports dimensions, into the viewport by adjusting the viewBox coordinates suitably. Which makes us to think of the svg as an infinite canvas.