Jump to content
Search Community

Move paths to absolute position

francis789 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

Working with SVG coordinates isn't really anything like normal DOM positioning.

getBBox() helps in basic setups like you are using. getBBox() returns the x, y, width, and height of an element.

Below is a very rudimentary application

 

See the Pen mxaKpv by GreenSock (@GreenSock) on CodePen

 

 

The catch is the getBBox() returns values that ignore any additional transforms that were applied.

Perhaps some of the other guys can point you to some more resources but below is a demo from @OSUblake that may help and a link to another thread packed with some other tips about SVG and getBBox(). 

 

 

 

See the Pen ZQqavM?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Hi @francis789

 

There's no absolute or relative positioning in SVG. That's for HTML. Everything starts at the 0,0 coordinate of the parent SVG's canvas. 

 

You should remove transforms from anything you want to animate as it might cause problems with scaling and rotation. You can remove transforms by ungrouping stuff in Illustrator. Once the transforms are removed, you can group your stuff back if you want.

 

<path id="star1" d="M87.07,76..." transform="translate(-26.98 -46.26)"/>

 

 

And read the post that Carl linked to. Magic!!!

 

See the Pen ZxVmyx by osublake (@osublake) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Hi @OSUblake and @Carl

I'm having some trouble with the recommendations I've been given in this page...

  • getBBox() seems to work fine in Codepen, but in my code I get "getBBox() is not a function". My object is a path, and the same message appears in FireFox and Chrome.
  • Ungroup and regroup in Illustrator? I've been using 2-3 levels of groups, attributing ids in Illustrator, adding in classes programmatically... Can I proceed as follows:
    • copy id in Illustrator
    • select items in group,
    • ungroup
    • group
    • paste id to new group
  • Or am I supposed to ungroup all groups and then recreate them all?
  • Do I have to do the above for all group levels?
  • Maybe the best recommendation is "stay away from SVG groups if you want to stay sane" ?
Link to comment
Share on other sites

Made some progress:

  • I was using getBBox()  with jQuery, not getElementById, which seems to work better
  • I've reduced the groups causing problems to Compound paths in Illustrator.

Now I have hopes that if I rewrite the code it will work...

Link to comment
Share on other sites

Regarding groups, it's not a problem. See this Stackoverflow question for different ways to get rid of transforms.

https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files

 

I thought Illustrator had an option to automatically apply transforms to paths, but I can't find it. Maybe @PointC can offer some tips. I know SVGO is popular, but you have to be careful about some of the settings as it might change too much stuff in your svg file.

https://jakearchibald.github.io/svgomg/

 

 

  • Like 1
Link to comment
Share on other sites

SVGO helps reduce file size, but it can remove transforms according to this answer on Stackoverflow.

https://stackoverflow.com/a/47397118/2760155

 

Quote

The relevant options in this case are moveGroupAttrsToElems (SVGOMG: Move group attrs to elements) to move transform attributes from groups to path elements, plus convertPathData (SVGOMG: Round/rewrite paths) to flatten transform into d.

 

 

  • Like 1
Link to comment
Share on other sites

5 hours ago, OSUblake said:

Maybe @PointC can offer some tips.

 

My biggest tips for taming the gremlins that reside in Adobe Illustrator's SVG Export would be convert to compound paths and always include a background rectangle that matches the same dimensions as your master SVG.

 

Take this simple example

waw3Lvo.png

 

If we leave them as rectangles, we get this for output:

<svg  xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300">
  <rect width="600" height="300" fill="#000"/>
  <g id="boxes">
    <rect x="100" y="50" width="200" height="200" transform="translate(164.64 -97.49) rotate(45)" fill="#c1272d"/>
    <rect x="200" y="50" width="200" height="200" transform="translate(193.93 -168.2) rotate(45)" fill="#7ac943"/>
    <rect x="300" y="50" width="200" height="200" transform="translate(223.22 -238.91) rotate(45)" fill="#3fa9f5"/>
  </g>
</svg>

 

But if we convert them to compound paths, we get this:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300">
  <rect width="600" height="300" fill="#000"/>
  <g id="boxes">
    <path d="M200,291.42,58.58,150,200,8.58,341.42,150Z" fill="#c1272d"/>
    <path d="M300,291.42,158.58,150,300,8.58,441.42,150Z" fill="#7ac943"/>
    <path d="M400,291.42,258.58,150,400,8.58,541.42,150Z" fill="#3fa9f5"/>
  </g>
</svg>

 

I always recommend the use of a background rectangle so there are no coordinate surprises. If we remove that rectangle, we get this:

<svg xmlns="http://www.w3.org/2000/svg" width="482.84" height="282.84" viewBox="0 0 482.84 282.84">
  <g id="boxes">
    <path d="M200,291.42,58.58,150,200,8.58,341.42,150Z" transform="translate(-58.58 -8.58)" fill="#c1272d"/>
    <path d="M300,291.42,158.58,150,300,8.58,441.42,150Z" transform="translate(-58.58 -8.58)" fill="#7ac943"/>
    <path d="M400,291.42,258.58,150,400,8.58,541.42,150Z" transform="translate(-58.58 -8.58)" fill="#3fa9f5"/>
  </g>
</svg>

 

Even though these are compound paths, we now have transforms on them and our viewBox is not the 600x300 we were working with in AI. I think a lot of people assume the SVG will automatically be the same dimensions as your AI project, but that is not always the case. You can skip the background rectangle and still get the correct size if you choose to export the artboard or assets, but I don't care for that approach because you can't see the code before you export. I also find the code gets a bit more bloated by doing that.

 

One other thing that is available in AI should you be getting some strange coordinates is under the top menu: Object --> Transform --> Reset Bounding Box.

 

For my own personal workflow, I sometimes put all my groups stacked on top of each other at coordinates (0,0). I then use GSAP to move them to their starting positions. 

 

Happy tweening.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

I've forgotten that rectangle many times too.

 

One thing I've done to help my memory is set up a collection of templates for Illustrator that already have a background rectangle ready to go. I think it's one of those overlooked features of AI that really is quite helpful. All you do to create a template is File --> Save As Template. Then 'New From Template' instead of 'New' when you start a new project.

 

I have several using the SVG sizes I use most often. I drop in a background rectangle and some empty named layers for artwork. It'll also remember the palette and a lot of your other settings. I work on a fairly large screen so I was always increasing the thumbnail size in the layers panel options each time I started a new document. That too is remembered in a template. 

:)

 

  • Like 4
Link to comment
Share on other sites

  • 7 months later...
  • 2 months later...

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