I have the following Path element. What i can't figure out is where in it's path data instructions about the origin of the whole shape is made. If i set translate to (100 200) as below, the middle of the height of the whole shape as Y value (and a implicit 0 as X) is chosen. I would like to understand how this happens and whether this information is somewhere in the path data (
<!DOCTYPE html> <html> <body> <svg height="1000" width="1000"> <path d="M71 70v-169l69 28v168zM140 203v177h28v-165l42 17v-105l-42 -18v-169l42 18v-105l-42 -18v-173h-28v161l-69 -27v-176h-28v164l-43 -16v105l43 17v169l-43 -17v106l43 15v175h28v-162z" transform="translate(100 200) scale(0.6 -0.3)"/> <rect width="100" height="2" x="100" y="200" fill="red"> </svg> </body> </html>
And the starting point of the red rect and the magic starting point of the path are the same point (100 200):
Can some one help me understand how this magic point is determined?