Several SVG documents describe using the translate command when you want to move the origin from the SVG-default upper-left corner position. I've started doing this a few times, and then run into problems that I didn't have immediate solutions to. Since solutions to those problems were stopping me from solving the original problem, I'd inevitably fall back to leaving the origin in SVG-default position and performing various translations manually. This note addresses some of the problems that you might encounter when you don't use the SVG-default origin, along with some solutions and limitations.
The SVG-default origin is shown in Figure 1. The origin is in the upper left. The x-axis increases from left-to-right. The y-axis increases from top-to-bottom.
The SVG for Figure 1 is shown in Listing 1. There are no surprizes here.
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:blue">
<line x1="-300" y1="0" x2="300" y2="0"/>
<line x1="-200" y1="5" x2="-200" y2="-5"/>
<line x1="-100" y1="5" x2="-100" y2="-5"/>
<line x1="100" y1="5" x2="100" y2="-5"/>
<line x1="200" y1="5" x2="200" y2="-5"/>
</g>
<g style="stroke:none;fill:blue;text-anchor:middle">
<text x="-200" y="20">-200</text>
<text x="-100" y="20">-100</text>
<text x="100" y="20">100</text>
<text x="200" y="20">200</text>
<text x="250" y="20" stroke="blue">X axis</text>
</g>
<g style="stroke:red">
<line x1="0" y1="-300" x2="0" y2="300"/>
<line x1="5" y1="-200" x2="-5" y2="-200"/>
<line x1="5" y1="-100" x2="-5" y2="-100"/>
<line x1="5" y1="100" x2="-5" y2="100"/>
<line x1="5" y1="200" x2="-5" y2="200"/>
</g>
<g style="stroke:none;fill:red;">
<text x="10" y="-200" dy="5">-200</text>
<text x="10" y="-100" dy="5">-100</text>
<text x="10" y="100" dy="5">100</text>
<text x="10" y="200" dy="5">200</text>
<text x="10" y="250" dy="5" stroke="red">Y axis</text>
</g>
</svg>
Listing 1. SVG-default origin
Figure 2 shows the origin moved to the center of the SVG document. This was done by adding the translate(300,300) to the transform. The HTML window height and width is also increased, to show the full extent of the x and y axes. The x-axis increases from left-to-right and the y-axis increases from top-to-bottom.
Listing 2 shows the primary difference between Figure 1 and Figure 2. A group with a transform was added to move all the graphics down and to the right.
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(300,300)">
<g style="stroke:blue">
Listing 2. Translated origin
Figure 3 shows the origin still in to the center and the x-axis increasing from left-to-right, but the y-axis increases from top-to-bottom. This was done by adding scale(1, -1) to the transform. The text is in the right position, but there is an obvious problem with this. The text is upside down.
Listing 3 shows the primary difference between Figure 2 and Figure 3. Scale was added the transform to flip the y-axis.
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(300,300) scale(1, -1)">
<g style="stroke:blue">
Listing 3. Translated origin with scale
Figure 4 shows the the text right-side up. The trick is use a translate on a group to move the text elements. Using this suggestion, the text remains in the same coordinate system as the graphics, and displays properly.
The complete SVG for Figure 4 is shown in Listing 4. Translate and scale transforms were added to groups around the text elements.
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(300,300) scale(1, -1)">
<g style="stroke:blue">
<line x1="-300" y1="0" x2="300" y2="0"/>
<line x1="-200" y1="5" x2="-200" y2="-5"/>
<line x1="-100" y1="5" x2="-100" y2="-5"/>
<line x1="100" y1="5" x2="100" y2="-5"/>
<line x1="200" y1="5" x2="200" y2="-5"/>
</g>
<g style="stroke:none;fill:blue;text-anchor:middle" transform="translate(0,10) scale(1, -1)">
<text x="-200">-200</text>
<text x="-100">-100</text>
<text x="100">100</text>
<text x="200">200</text>
<text x="250" stroke="blue">X axis</text>
</g>
<g style="stroke:red">
<line x1="0" y1="-300" x2="0" y2="300"/>
<line x1="5" y1="-200" x2="-5" y2="-200"/>
<line x1="5" y1="-100" x2="-5" y2="-100"/>
<line x1="5" y1="100" x2="-5" y2="100"/>
<line x1="5" y1="200" x2="-5" y2="200"/>
</g>
<g style="stroke:none;fill:red;">
<g transform="translate(10,-200) scale(1, -1)">
<text dy="5">-200</text>
</g>
<g transform="translate(10,-100) scale(1, -1)">
<text dy="5">-100</text>
</g>
<g transform="translate(10,100) scale(1, -1)">
<text dy="5">100</text>
</g>
<g transform="translate(10,200) scale(1, -1)">
<text dy="5">200</text>
</g>
<g transform="translate(10,250) scale(1, -1)">
<text dy="5" stroke="red" >Y axis</text>
</g>
</g>
</g>
</svg>
Listing 4. Transformed groups of text