SVG shape path starting point

[traummaschine]

I wondered if anyone can help shed some light on how I might be able to shift the starting point of an SVG path which forms the shape of a rectangle.

 

I'm aware it's more to do with the SVG file itself, but it's well illustrated using GSAP's DrawSVG plugin (see the codepen)

 

Ideally, the vertical rectangle would have a bottom right starting point, and the horizontal rectangle a bottom left starting point. Both currently start at the top left.

 

I tried flipping the paths in Illustrator before exporting the SVG and various other things, but got the same results as far as these rectangles go. Also tried a few things with tools like SVGOMG, but no joy.

 

 

Many thanks in advance for any help! (and apologies if this has been covered elsewhere – I couldn't find a thread concerned with this here)

 

See the Pen RGkoZW by traummaschine (@traummaschine) on CodePen

[Jonathan]

Hello traummaschine, and Welcome to the GreenSock Forum!

 

This is more of the order of the way your paths are written

 

Basically you have to apply a transform on the paths to rotate 180 degrees and translate them to the original position. Which is like a trial and error type of thing changing the transform values to get them to flip and start at the bottom right.

 

See the Pen yaogqW by jonathan (@jonathan) on CodePen

<path id="underline" transform="rotate(180,50,50) translate(-227,-743)" fill="none" stroke="#000" stroke-width="11.7" stroke-miterlimit="10" d="M5.85 352.371H221.744V393.068H5.85z" />
<path id="rectangle" transform="rotate(180,50,50) translate(-53,-320)" fill="none" stroke="#000" stroke-width="11.7" stroke-miterlimit="10" d="M5.851 5.85h40.698v305.822H5.851z" />

Normally its better to just use the transform rotate on the <svg> element for just a simple rotate without using translate. But since we have to rotate the svg child <path> we have to also use translate to align the <path> back in the original place you wanted it before it was rotated.

 

Another way is you would have to adjust your <path> d attribute points so the starting position (first data point in the d attribute is at the bottom right corner you wanted to start from.)

 

Resources:

SVG basic transformations: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations

SVG paths: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

SVG Transformations: https://sarasoueidan.com/blog/svg-transformations/