0

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 (d attribute)?

<!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):

enter image description here

Can some one help me understand how this magic point is determined?

1

I highly recommend reading this post on SVG's syntax. It will probably answer all of your questions :)

With that being said, when understanding a coordinate system I highly recommend not scaling whatever you're looking at. That makes it a lot harder to understand.

Your path command uses the following commands:

  • M: Move to the absolute coordinates x,y
  • v: Draw a line vertically relatively down y (or up if a negative value)
  • l: Draw a straight line to a point that is relatively right x and down y (or left and up if negative values)
  • h: Draw a line horizontally relatively to the right x (or to the left if a negative value)
  • z: Draw a straight line back to the start of the path (the last M or m command usually)

The origin of SVG is in the top left. If you remove the transform applied to your path, you can use a line to show where the start point of your path is: Demo

<path d="M 0 0 
  l 71 70" stroke="red"/>

Separating out the commands and using white space can help you understand exactly what's happening.

To center your path in your SVG, you should probably either modify the path or use SVG's viewbox attribute, not a transform.

For more information related to SVG's coordinate system, I highly recommend Sara Soueidan's article series on the subject.

3
  • Why is using transform/translate for changing the position of a path not recommended? It seems most easy and natural, rather than changing the path-data d (bad idea!) for each new position, and changing the toplevel viewbox attribute doesn't help if i want to reuse 100 times the same path, but in 100 different positions.
    – Student
    Feb 16 '20 at 13:47
  • 1
    @Student I never said not to use transforms to move your path. In this question you are seeking to understand "Can some one help me understand how this magic point is determined?" which is the question that I answered. With that being said, getting the path centered, getting it without any white space around the edges, and not having any overflow is the best way to start out. Then using transforms to move it as necessary is a great idea. Feb 16 '20 at 13:53
  • 1
    If you are transforming SVGs, make sure you test in different browsers because there are multiple cross-platform differences in the way that transforms on SVG elements are handled. Using GSAP can handle those differences for you so you don't have to worry about it. Feb 16 '20 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.