Afro

Can't get DrawSVGPlugin workign

Recommended Posts

Hey Everyone,

 

I am sorry if I am asking a question that has already been answered a buncha times, I have been researching this for about 2 hours at least.

 

I have this very basic lightning bolt SVG which I just want to draw using the plugin.  Here is the html for the svg

 

<svg class="bolt"  xmlns="http://www.w3.org/2000/svg"> 
  <use xlink:href="./assets/animation-assets/comp-search-fiona/bolt.svg#bolt"></use>
</svg>

 

and here is the js code I am using to try and draw said SVG

 

const bolts = Array.from(document.getElementsByClassName('bolt'))
this.hoverTl.to(bolts[0], 1, {drawSVG: '20% 50%'})

 

I am just selecting the first bolt and experimenting to see if the drawing works, then applying it to all of my bolts.

 

My gut is telling me I am doing something wrong in the HTML and the <svg> with the <use> is not creating an inline svg that can work with the drawSVGPlugin.

 

Any help would be much appreciated!

Share this post


Link to post
Share on other sites

Hi @Afro,

 

DrawSVG needs the stroke of a path, line, polyline, polygon, rect or ellipse .. but it looks like you are passing the whole SVG to the tween.

 

Can you post the actual SVG of the bolt so I can show you?

Share this post


Link to post
Share on other sites

Hi @Shaun Gorneau,

 

Thank you so much for the fast response!

 

I have attached the svg to this post.

 

And here is it in code just for good measure

 

<svg xmlns="http://www.w3.org/2000/svg" id="bolt" viewBox="0 0 32 97"><defs><style>.cls-1{fill:#00adbb;stroke:#00adbb;stroke-miterlimit:10;}</style></defs><title>Asset 13</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="0.5" y="46.5" width="3" height="50" rx="1.5"/><rect class="cls-1" x="7.5" y="44.5" width="3" height="30" rx="1.5" transform="translate(-28.54 12.47) rotate(-30)"/><rect class="cls-1" x="14.5" y="23.5" width="3" height="50" rx="1.5"/><rect class="cls-1" x="21.5" y="21.5" width="3" height="30" rx="1.5" transform="translate(-15.17 16.39) rotate(-30)"/><rect class="cls-1" x="28.5" y="0.5" width="3" height="50" rx="1.5"/></g></g></svg>

 

bolt.svg

Share this post


Link to post
Share on other sites

Have a look here, you can see how it is drawing the SVG. I've done 3 ... your SVG, an SVG only using a wide stroke, and an SVG with a stoke and fill.

 

 

Hope this helps!

  • Like 4

Share this post


Link to post
Share on other sites

You sir are a gentleman and a scholar!

 

I am only left with one question, does this mean I have to inline the svgs in the same manner you did in the demo?

 

Thank you so much for the help.

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, Afro said:

I am only left with one question, does this mean I have to inline the svgs in the same manner you did in the demo?

 

I'm not sure on the <use> question ... in my tests, use doesn't even load the external resource 😕 

 

I would have to defer to the SVG champs around here!

  • Like 1

Share this post


Link to post
Share on other sites

Yeah, I don't think you can access stuff inside an externally-loaded SVG file via JavaScript for security reasons. As far as I know, you'll need to inline them. But you could dynamically inject it if you prefer. That way you kinda get the best of both worlds. 

  • Like 2

Share this post


Link to post
Share on other sites

That makes perfect sense.  Thank you so much guys!

Share this post


Link to post
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.