Jump to content
Search Community

DrawSVG just throws the graphic instead of draw it

Juno911 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

 

Hi,

 

I am trying to run DrawSVG. I used several tutorials from this page. I understand the css and js part well, however, I think I didnt get something with the measurements or the svg itself.

 

Please have a look in the codepen typed. If I throw the following path directly after thew svg openeer tag (before the first path from codepen) my graphic indead appears. But my path is only thrown, the original pathes from the codepen are drawn well. I first thought I have environment issue with my servers, thats my I tried in this (and other) codepens. My graphic is always thrown, css is applied at anytime, but I guess something is missing. Has someone a hint? Thanks a lot!

 

  <path class="" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M412.2,123.8c-6.7,1.9-12,6.5-18,9.7c-8.9,4.7-17.4,10.2-26.1,15.3c-2.4,1.4-4.6,1.4-7.2-0.5
        c-16-11.7-32.3-23.1-48.4-34.7c-3.5-2.5-3.2-5.5,0.5-8.2c5.1-3.6,10.9-5.8,16.4-8.6c13.9-7.1,27.9-14.3,41.7-21.6
        c3.3-1.7,5.7-1.7,8.1,1.3c7.8,9.9,15.8,19.6,23.8,29.4c2.1,2.5,3.9,5.4,6.2,7.6C412.6,116.5,414,119.7,412.2,123.8L412.2,123.8z
         M322.1,110.1c12.7,9.3,25.1,18.3,37.4,27.5c4,3,7.2,3,11.6,0.1c8.8-5.8,18.2-10.8,27.4-15.9c4.9-2.7,5-3.3,1.5-7.6
        c-8-9.8-16-19.5-23.8-29.4c-1.3-1.7-2.1-2-3.9-1c-3.6,2.1-7.4,4.1-11.2,6.1C348.3,96.6,334.9,102.3,322.1,110.1z"/>

See the Pen qEdova by sdras (@sdras) on CodePen

Link to comment
Share on other sites

It appears you posted a demo from Sarah Drasner. I'm sure that was just and accident. No worries.

 

Please post a simplified demo with just enough svg code and js to illustrate the issue.

From your description one path and one tween should be sufficient. I'm having a hard time understanding what you mean by "the path is thrown" but i'm confident a demo will clear it up.

  • Like 2
Link to comment
Share on other sites

Like @Carl, I'm pretty confused by the question (particularly the "thrown" part), but I did notice that your <path> has multiple "M" commands in it which means that it's not one continuous line. That probably won't work very well with a drawSVG effect because the entire effect relies on animating the stroke-dashOffset. In a case like yours, I'd strongly recommend breaking that one <path> into one for each "M" command (segment) so that you can animate them independently. 

 

For example, in your case: 

<path class="" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M412.2,123.8c-6.7,1.9-12,6.5-18,9.7c-8.9,4.7-17.4,10.2-26.1,15.3c-2.4,1.4-4.6,1.4-7.2-0.5
        c-16-11.7-32.3-23.1-48.4-34.7c-3.5-2.5-3.2-5.5,0.5-8.2c5.1-3.6,10.9-5.8,16.4-8.6c13.9-7.1,27.9-14.3,41.7-21.6
        c3.3-1.7,5.7-1.7,8.1,1.3c7.8,9.9,15.8,19.6,23.8,29.4c2.1,2.5,3.9,5.4,6.2,7.6C412.6,116.5,414,119.7,412.2,123.8L412.2,123.8z">
<path class="" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M322.1,110.1c12.7,9.3,25.1,18.3,37.4,27.5c4,3,7.2,3,11.6,0.1c8.8-5.8,18.2-10.8,27.4-15.9c4.9-2.7,5-3.3,1.5-7.6
        c-8-9.8-16-19.5-23.8-29.4c-1.3-1.7-2.1-2-3.9-1c-3.6,2.1-7.4,4.1-11.2,6.1C348.3,96.6,334.9,102.3,322.1,110.1z"/>

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

To shed light on "thrown": I just meant its rendered. Nothing more. Just as an image or any other graphic. Just displayed. This is what I meant with "thrown". Just thrown into the screen, not drawn nicely.

However, your hint in regard to pathes containing lines instead of forms is great. The form is part of a logo and I will ask our Adobe team if they can deliver path description for each line, instead of these kind of rectangle forms. Thanks so far for all answers. Once I got a new svg file, I will try again.

Link to comment
Share on other sites

No problem. And you could probably automate the splitting apart of the multi-segment <path> if you want. Perhaps it's easy for the Adobe team to deliver what you want, but if you need help with that segmenting let me know. It's basically just taking all that junk in the "d" attribute and creating a new <path> for each "M" command in there (so you could split("M") and run it through a loop). Well, you can leave the first M in that original path, but all the extra ones you'd dump into their own <path>. 

 

Good luck!

Link to comment
Share on other sites

I am quite new to all this, however, your plugins are great enough to be understood fast and without being a passionated editor. Thats why I want to dig a bit deeper. I will setup a codepen soon and paste it here. I would appreciate understanding both sides, fixing by object source, or fixing with smart lines of code. Once I am done, I will paste and looking forward to more ideas on it. Thanks so far, really appreciate it!

Link to comment
Share on other sites

ok, I did the job already. I am now curious what I do wrong. I hope its not too much.

Please have a look here, Sir.

 

Its still the same svg source file I used before. I reduced my code to a minimum. I do not have a specific target yet. Oh yes, I have. To learn SVGDraw. Finally I probably look for a animation where three groups of units exist and somehow animate the logo appearance in a parallel sequence. Once I get my first image running well, I am sure I will find inspiration on your page. But unfortunately I didnt get the click moment yet, to make the lines even run very simply.

I hope the case I now better understandable. I first had to sign up with CodePen, I am not a developer. 

 

See the Pen KRoyLb by generaal-locke (@generaal-locke) on CodePen

 

Link to comment
Share on other sites

First of all thanks for having a look. And for fixing it. However, in the real server env all these stuff is loaded. I just copied the code from my local script and unfortunately the code is running well. I mean I am totally happy. I see my logo animated the very first time, but why dont I see that local. I will compare versioning of libs loaded and if this fails, I will isolate my local code to a page out of its framework. Its at least and for sure not the browser, because this pen here now runs like a charme. You guys are my heroes of the day and week. Thanks a lot!

Link to comment
Share on other sites

Yeah I saw that in a video already, I simply forgot in my first pen.It will not happen again :-). And I saw the place where you put them, so this is pretty clear and simple. Someone just has to think of it. Not sure why JS window didnt give any error. Sometimes there is a red mark, but this time there wasnt any. Probably the console did show some errors, but I didnt check. However, its working now in a 90% good way and I can start to be creative. Super cool tool, super cool community. Its the 3rd time I ask and even my colleagues in my company do not answer that fast! Thats a message guys :)

Link to comment
Share on other sites

Oh, sorry, I wasn't talking about checking for things on CodePen. I meant that you could use Carl's technique to check for the plugins locally since you said the animation wasn't working in your local development environment.

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

ooh yeah, now I got it. And I immediately tested it. And my plugins loaded well. Now I made it run locally as well. Did you change anything to the codepens SVG? I copied from my local svg to codepen. You added js plugins and this did the job. Now I copied back codepens SVG to my local and it worked immediately, But the codepen SVG is from my local copy and I did no changes. Either code pen has a magic inside or something has  changed. Do you know of something? Otherweise we can close the case, because finally things are working, even if I dont know why they work now and not before. That makes only sense in case of a SVG change. But who could have done that?

Link to comment
Share on other sites

Thats crazy, my new svg (which I took now from you codepen) has more lines that my one I recently copied. Is there maybe a codepen automat detecting suboptimal SVG and make it better? I really cant think of this without prompting something, but who knows.

Link to comment
Share on other sites

Yep - we add 'GreenSock Moderator Magic' to all forked pens. :D

 

The only change I made to your pen was adding the missing scripts when I forked it. I didn't touch the HTML at all so I'm not sure why you're seeing a difference in the SVG. I'm glad to hear it's working locally now. 

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

However, its working. I will try to start my second drawing, then I will see if this time all steps go right the first time. Do you maybe know a trick to embed svg smart into html? I read this post 

 

https://wiki.selfhtml.org/wiki/SVG/Einbindung (hope it changes the language to yours)

 

and it said SVG can be embedded with <object> to let JS still be able to access the pathes. But this is not working. Whatever I do (img, background, embed, object) its just the static svg. Only inline svg makes the animation done. By now I get contents into php var and then simply echo in html. Because inline svg is really not an option. It makes no sense to see these files ever again after they work.

 

Do you have any idea to use regular html technique to pull scg like a style or script?

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