Giters

maxwellito / vivus

JavaScript library to make drawing animation on SVG

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

support for "text" elements

asaeed opened this issue · comments

commented

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!

commented

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.

commented

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!

commented

:-)

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.