search

shrhdk / text-to-svg

Convert text to SVG path without native dependence.
Other
974 stars 131 forks source link

Uncaught TypeError: fs.readFileSync is not a function #9

Open ericgrosse opened 8 years ago

ericgrosse commented 8 years ago

I used the code from the documentation and get the following error:

Uncaught TypeError: fs.readFileSync is not a function

This was from a browserify setup. Using webpack, I get a similar error:

Module not found: Error: Cannot resolve module 'fs'

shrhdk commented 8 years ago

Hi @ericgrosse,

This library does not support web browsers. And I am working on this issue. #6

Please consider to use opentype.js if you need immediately. https://github.com/shrhdk/text-to-svg/issues/3#issuecomment-141885559

ericgrosse commented 8 years ago

If it's not meant to be used in a browser, then how is it meant to be used?

shrhdk commented 8 years ago

I am using this library for a web application on Node.js.

ericgrosse commented 8 years ago

Right, but if I wanted to use this library myself in the most minimal setup, how would I do it? Do npm install -g text-to-svg and use text-to-svg on a JavaScript file in the terminal?

shrhdk commented 8 years ago

Yes, that's right 👍

ericgrosse commented 8 years ago

Just tried, works well except I had to add some weird viewBox dimensions just to see the generated SVG properly.

I have a question. Every approach I've tried for converting text to SVG (your library, opentype.js, even Adobe Illustrator) produce paths that are outlines around each letter. How can I instead get the path through each letter? I'm trying to animate SVG text but it requires that the path fill property is set to none, and then animates the stroke, hence the issue.

Edit: Basically I want the stroke to be the entire letter

shrhdk commented 8 years ago

Do you want to get the separated path data of each characters?

My understanding is in following table. Is this correct?

Letters Number of path
o 1
% 1 (NOT 3)
ooo 3
gdad-s-river commented 8 years ago

@ericgrosse, did you find the answer to your question? I'm about to embark on the same journey.

ericgrosse commented 8 years ago

It's been a while, but from what I recall, I couldn't find a good automated or programmatic way of getting the path through each letter. The best I could find was complex manipulations in Photoshop/Illustrator and that didn't really interest me.

gdad-s-river commented 8 years ago

@shrhdk, do you have a follow up on this please?

shrhdk commented 8 years ago

@ericgrosse Could you give me an example which you made by using Photoshop/Illustrator?

gdad-s-river commented 8 years ago

@ericgrosse, If I'm correct, instead of something like this, you wanted something like this, right?

@shrhdk , do you still need an example that differentiates what eric and I are trying to figure out, or is it clear now? If it's not, I've to try experimenting with getting svgs from inkscape, perhaps then I can show the differentiation that you asked for in the last comment.

@ericgrosse, is it possible for you to show how you were able to do it with photoshop (if you continued to do so, and didn't leave before, because you wanted a programatic way instead of doing it in photoshop)?