Jump to content
Search Community

SVG shape path starting point

traummaschine test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.)



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/



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...