Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support for "text" elements #22

Closed
asaeed opened this issue Jan 11, 2015 · 3 comments
Closed

support for "text" elements #22

asaeed opened this issue Jan 11, 2015 · 3 comments

Comments

@asaeed
Copy link

asaeed commented Jan 11, 2015

Hi,

Great lib - but wondering why there isn't support for svg text elements, and if there is any plan to add support.

html:

    <svg id="t2">
        <text x="250" y="250" fill="none" stroke="#ffffff" style="stroke-width: 1px;">Test</text>
    </svg>

js:

    var v_text2 = new Vivus('t2', { type: 'delayed', duration: 200, start: 'autostart' });

This example makes me think it should be doable, but i'm very new to svg stuff so maybe I'm missing something:
http://codepen.io/yoksel/pen/XJbzrO

Thanks!

@maxwellito
Copy link
Owner

Thanks for these kind words :)
I never really paid attention to textelements :-S It's true my library doesn't take them in change.

To work, Vivus need to transform all object from the SVG (:circle, rect, line..) into pathelements. For text, it looks crazy to build. From what I found, RaphaelJS seems able to do it, but including a 90Kb library to this repo is too much.

Thanks for the codepen. I checked how this example works, because it keep the textelements, but I cannot implement it anyway. It doesn't seems possible to control independently each letter, and impossible to get the total length of the element.

So the only solution I can see is to transform your text elements to pathdirectly from your SVG editor, or try to implement RaphaelJS. I'm sorry about that.

Anyway, I have to update the documentation to mention this.

@asaeed
Copy link
Author

asaeed commented Jan 12, 2015

Hey thanks for the quick reply. I ended up converting text to paths in Inkscape and that worked great with vivus. I see what you mean about not being able to control each letter independently to achieve delayed or one-by-one effect, but maybe you could support text if people put each letter in a separate text field? just an idea for when you are thinking of extending new features. in any case, awesome fun lib - thanks!

@maxwellito
Copy link
Owner

:-)

Well I tried to play with text element containing a simple letter. Same problem, it's impossible to use, I cannot get the line length. It doesn't work either with percentage values. RaphaelJS (actually I have to try it) or compatible elements only. it's sad.

But I definitely have to update the doc to mention it. Thanks for this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants