Share Posted July 18, 2021 Simply cannot get this thing to look fully central to to the line the entire time! HELP Thanks See the Pen rNmwmVj by joshlw123123123 (@joshlw123123123) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted July 19, 2021 Ah, it looks like you had paths that were formatted in a tricky way where some of the values were smashed together with no space or comma. For example: 126.87-32.48-310.91-58-499 Instead of: 126.87,-32.48,-310.91,-58,-499 So you can fix the path markup by adding commas (or spaces) like: <!-- OLD --> <path id="path" class="cls-1" d="M2582.77-617.52c-126.87-32.48-310.91-58-499,9.18-231.24,82.61-212.74,214-462.53,359.86-295.13,172.35-460.44,70-804.95,271.15A1407.88,1407.88,0,0,0,569,206.21" transform="translate(-567.97 651.56)"/> <!-- NEW --> <path id="path" class="cls-1" d="M2582.77,-617.52c-126.87,-32.48,-310.91,-58,-499,9.18,-231.24,82.61,-212.74,214,-462.53,359.86,-295.13,172.35,-460.44,70,-804.95,271.15A1407.88,1407.88,0,0,0,569,206.21" transform="translate(-567.97 651.56)"/> And don't forget to set the align and alignOrigin. I just added some code to the next release of MotionPathPlugin that should handle that correctly. Here's a fork that shows it working: See the Pen rNmwzBE?editors=0010 by GreenSock (@GreenSock) on CodePen Better? 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 19, 2021 5 hours ago, GreenSock said: Ah, it looks like you had paths that were formatted in a tricky way where some of the values were smashed together with no space or comma. For example: 126.87-32.48-310.91-58-499 Instead of: 126.87,-32.48,-310.91,-58,-499 Okay good information, however is there a way to do this faster? Perhaps a setting in illustrator that will do this for me? Thanks a lot for your help! Link to comment Share on other sites More sharing options...
Author Share Posted July 19, 2021 @GreenSock Just noticed in your codepen you're using a different version, If I copy this svg code and JS to my project it simply doesn't work using 3.7.1 Motion Path, but I notice in your code pen settings you are using 3.8.0? If I copy the CDN you've changed the codepen to, it works fine! Confused! Link to comment Share on other sites More sharing options...
Share Posted July 19, 2021 Hi Joshua! The code file he used is the beta for the next release. 3.7.1 will work if you clean up your SVG. A good place to do that is SVGOMG. https://jakearchibald.github.io/svgomg/ It's always a good idea to run your SVG code through it. Try using this. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2015.8 858.76"> <defs> <style> .cls-4{fill:#e9e8d8}.cls-5{fill:#f60}.cls-6{fill:#45474a}.cls-7{fill:#fc0} </style> </defs> <path id="path" d="M2014.8 34.04c-126.87-32.48-310.91-58-499 9.18-231.24 82.61-212.74 214-462.53 359.86-295.13 172.35-460.44 70-804.95 271.15A1407.88 1407.88 0 001.03 857.77" fill="none" stroke="#5bc914" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" opacity=".41"/> <g id="car"> <path d="M2554.37-647.94a48.77 48.77 0 017-.45h5a16.49 16.49 0 0116.35 16.61l-.06 7-.06 7a16.46 16.46 0 01-16.6 16.34h-5a48.76 48.76 0 01-7-.55l-6.9-1a49.86 49.86 0 00-7.72-.56l-28.7.17a17.81 17.81 0 00-5 .75 17.49 17.49 0 01-5.22.75l-12.74-.1a12.74 12.74 0 01-12.64-12.84l.09-10.76.09-10.77a12.74 12.74 0 0112.87-12.65l12.73.1a17.74 17.74 0 015.21.84 17.35 17.35 0 005 .82l28.69.63a49.89 49.89 0 007.73-.43z" transform="translate(-567.97 651.56)" fill="#1e1e1e"/> <path d="M2552.59-603.24a47.67 47.67 0 006.64.53h4.73a15.54 15.54 0 0015.67-15.42v-6.63l.06-6.64a15.55 15.55 0 00-15.38-15.6h-4.73a47.56 47.56 0 00-6.64.42l-6.53.88a48.16 48.16 0 01-7.3.41L2512-646a16.52 16.52 0 01-4.68-.79 16.75 16.75 0 00-4.92-.78l-12-.1a12 12 0 00-12.11 11.93l-.08 10.16-.08 10.16a12 12 0 0011.92 12.12l12 .09a16.36 16.36 0 004.92-.71 16.67 16.67 0 014.7-.7l27.08-.16a46.78 46.78 0 017.29.52z" transform="translate(-567.97 651.56)" fill="#262626"/> <path class="cls-4" d="M2573.44-645.07c2-1.32 5.76 4.5 4.41 6.2s-6.05-5.13-4.41-6.2z" transform="translate(-567.97 651.56)"/> <path class="cls-5" d="M2550.89-647.2s-1.84-2.71-2.73-3.16-1.7 0-1.63.28 1.53 3.8 1.53 3.8z" transform="translate(-567.97 651.56)"/> <path class="cls-6" d="M2524.09-643.2c4.78.06 8.9 0 11.84-.09a107.79 107.79 0 0017-2c-11.19-.65-20.27-1-27.61-1.11-.55 1.04-.78 2.12-1.23 3.2zM2524.39-646.43c-22.67-.36-28.32 1.26-28.32 1.26 4.54 1.2 16.75 1.81 27.22 2 .34-1.1.86-2.18 1.1-3.26zM2523.81-607.15c4.78 0 8.89.11 11.83.27a107.43 107.43 0 0116.91 2.29c-11.19.47-20.27.66-27.62.67-.48-1.08-.69-2.14-1.12-3.23zM2524.05-603.92c-22.67 0-28.29-1.72-28.29-1.72 4.55-1.12 16.78-1.53 27.24-1.52.32 1.07.83 2.16 1.05 3.24z" transform="translate(-567.97 651.56)"/> <path class="cls-7" d="M2478.37-639.61c-.63-.3-.53-1.8.21-3.33s1.86-2.55 2.49-2.24.53 1.8-.22 3.33-1.85 2.55-2.48 2.24z" transform="translate(-567.97 651.56)"/> <path class="cls-4" d="M2573.12-604.5c2 1.35 5.83-4.41 4.5-6.13s-6.12 5-4.5 6.13z" transform="translate(-567.97 651.56)"/> <path class="cls-5" d="M2550.53-602.73s-1.87 2.68-2.77 3.12-1.71 0-1.63-.31 1.59-3.78 1.59-3.78z" transform="translate(-567.97 651.56)"/> <path class="cls-7" d="M2478.15-611.47c-.64.29-.56 1.79.16 3.34s1.81 2.57 2.45 2.27.56-1.79-.16-3.34-1.82-2.57-2.45-2.27z" transform="translate(-567.97 651.56)"/> <path class="cls-6" d="M2564.74-624.85c.12-15.19-8.16-19.09-8.16-19.09l-16.35 1.9a94.57 94.57 0 011.72 17 94.15 94.15 0 01-2 17l16.32 2.16s8.35-3.79 8.47-18.97zm-64-.51c-.09 10.93 2 15.84 2 15.84l-16.41-.13s-4.5-4.07-4.4-15.86 4.65-15.79 4.65-15.79l16.41.13s-2.16 4.88-2.25 15.81z" transform="translate(-567.97 651.56)"/> </g> </svg> 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now