This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Peter Gr
Posted Jul 13 - Read on Facebook

Has anyone used Josh Puckett's SVG module? I'm getting an error when trying to input the 'path' info that I got from Sketch, not sure why.

46 Comments

Mike Johnson

No sure on the module use specifically, but looks like you're unintentionally using too many single quotes. Try "<path d='M31 ... '></path>"

Mike Johnson

or vice versa

Peter Gr

Interesting. I get a new error when doing that:

Mike Johnson

Right, looks like you're calling new on a class method (create), which is not a constructor.

Try svg = new SVGLayer
strokeWidth etc

Mike Johnson

but I'm not sure on that specific module's usage, check the docs / examples?

Mike Johnson

That is strange.

Peter Gr

Maybe I didn't import the module correctly, I guess? The file from Josh's GitHub is in my 'modules' folder, so not sure..

Mike Johnson

The only difference is the quotes, try matching theirs (though I dont see how that would matter)... path: '<path d="M31 etc

Peter Gr

That's what I tried initially, but Framer won't let me. I have to use only single quotes

Peter Gr

Mike Johnson I really appreciate your help

Mike Johnson

share?

Peter Gr

Sure. That's literally the only code in it http://share.framerjs.com/a4g6rt6xo6jv/

Mike Johnson

hm, that module doesn't have a create method

Mike Johnson

expalins a bit :)

Peter Gr

uh oh

Peter Gr

Maybe it was changed since the time the tutorial was written.

Mike Johnson

Yeah, this version of the module is not the same as in the medium post. I'm tinkering with it

Mike Johnson

Here you go

Mike Johnson

the module exports an object of itself, so you have to wrap the require in { }

Mike Johnson

there is no create function ,but it was rewritten to build as a constructor ( like layer = new Layer )

Mike Johnson

and then your height and width were simply too small, the path of the svg is offset in the Y so it was getting cropped off

Mike Johnson

and the animate function was removed, no idea why or what the authors plan is for that

Peter Gr

Thanks!! I just noticed the code example on GitHub is in line with what you just mentioned, and different from Medium

Mike Johnson

Maybe the module is not a new version, but older ?

Peter Gr

Yeah he uses dashOffset to animate, instead of an animate function. Just got mine to animate!

Mike Johnson

Nice! there ya go!

Peter Gr

I think I need to double my artboard size in Sketch so that the svg coordinates come out the right size..

Peter Gr

But thanks so much for your help. It's great to finally be able to use this!

Mike Johnson

no problem!

Peter Gr

Got the scale issue done. Just make my sketch artboard 750 by 1334, and use those as the width & height in Framer. Aw man I'm so excited to play with this

Aditya Jain

sort of related: does the sketch plugin to get the SVG path not work anymore?

Dezideriu Raita-Beeckman

I love coding guys

Dezideriu Raita-Beeckman

I look forward for my 400.000€

Dezideriu Raita-Beeckman

Coding is very excellent is just nice Jargon

Dezideriu Raita-Beeckman

I use Brackets for it One of The Best on Planet yet

Dezideriu Raita-Beeckman

You can add future pluggings to it and so on

Dezideriu Raita-Beeckman

It can even Highlights the code you code it

Dezideriu Raita-Beeckman

Just Amazing

Dezideriu Raita-Beeckman

I can't wait guys to see what you can Prototyping with it

Dezideriu Raita-Beeckman

If you are Expert in coding then you don't need any Software like Sketch Up or After Effect you can Prototyping while coding and that it's so very Awesome

Dezideriu Raita-Beeckman

I have to admit that Framer is good as it is

Dezideriu Raita-Beeckman

No need to open any web browser it shows you Prototyping inside the Framer and that I find it so Awesome but be Aware! you need Apple Mac for it otherwise is useless

Dezideriu Raita-Beeckman

Unfortunately this particular Prototyping product has been created only for Mac at the moment

Dezideriu Raita-Beeckman

For Windows I suggest Pixate , Axure they are Awesome Prototyping

Read the entire post on Facebook