在蛇SVG动画 [英] SVG animation in snake

问题描述

我想在蛇的方式来动画文本，使用SVG，像这样的：

我的目标是让文字动画，但在同一个地方。我已经做了这一点：

\r

\r

VAR textPath =的document.getElementById（'texto），\r
    comprimento = textPath.getAttribute（'startOffset'）;\r
\r
VAR animador =的setInterval（函数（）{\r
    comprimento--;\r
    textPath.setAttribute（'startOffset'，comprimento）;\r
}，10）;

\r

＆LT; SVG WIDTH =400HEIGHT =400＆GT;\r
    ＆LT;＆DEFS GT;\r
        ＆LT;路径ID =mypath中D =M 40130Ç0,0 60，-80 120，-80 60,0 74.00337,80 140,80 65.99663,0 80，-80 140，-80 60,0 120， 80 120,80/＆GT;\r
    ＆LT; / DEFS＆GT;\r
    ＆LT;文本样式=行程：＃000000;＆GT;\r
        ＆LT; textPath startOffset =240ID =texto的XLink：HREF =＃mypath中＆GT;测试这个文字＆lt; / textPath＆GT;\r
    ＆LT; /文字和GT;\r
＆LT; / SVG＆GT;

\r

\r

\r

正如你所看到的，动画移动到的＆lt;？ - 如何解决这个问题。

解决方案

使用++而不是 - ，那么一旦offsetValue时打240（原为初始值当你去向后）停止增加它

\r

\r

VAR textPath =的document.getElementById（'texto），\r
    comprimento = textPath.getAttribute（'startOffset'）;\r
\r
VAR animador =的setInterval（函数（）{\r
    如果（comprimento＆LT; 240）{\r
      comprimento ++;\r
      textPath.setAttribute（'startOffset'，comprimento）;\r
    }\r
}，10）;

\r

＆LT; SVG WIDTH =400HEIGHT =400＆GT;\r
    ＆LT;＆DEFS GT;\r
        ＆LT;路径ID =mypath中D =M 40130Ç0,0 60，-80 120，-80 60,0 74.00337,80 140,80 65.99663,0 80，-80 140，-80 60,0 120， 80 120,80/＆GT;\r
    ＆LT; / DEFS＆GT;\r
    ＆LT;文本样式=行程：＃000000;＆GT;\r
        ＆LT; textPath startOffset =0ID =texto的XLink：HREF =＃mypath中＆GT;测试这个文字＆lt; / textPath＆GT;\r
    ＆LT; /文字和GT;\r
＆LT; / SVG＆GT;

\r

\r

\r

I'm trying to animate in snake way a text, using SVG, like this:

My goals is make the text animate, but in the same place. I already did this:

var textPath = document.getElementById('texto'),
    comprimento = textPath.getAttribute('startOffset');

var animador = setInterval(function () {
    comprimento--;
    textPath.setAttribute('startOffset', comprimento);
}, 10);

<svg width="400" height="400">
    <defs>
        <path id="myPath" d="m 40,130 c 0,0 60,-80 120,-80 60,0 74.00337,80 140,80 65.99663,0 80,-80 140,-80 60,0 120,80 120,80" />
    </defs>
    <text style="stroke: #000000;">
        <textPath startOffset="240" id="texto" xlink:href="#myPath">Testing this text</textPath>
    </text>
</svg>

As you can see, the animation is moving to the <-, how fix this?

解决方案

Use ++ instead of --, then once the offsetValue hits 240 (your original starting value when you went backwards) stop incrementing it.

var textPath = document.getElementById('texto'),
    comprimento = textPath.getAttribute('startOffset');

var animador = setInterval(function () {
    if (comprimento < 240) {
      comprimento++;
      textPath.setAttribute('startOffset', comprimento);
    }
}, 10);

<svg width="400" height="400">
    <defs>
        <path id="myPath" d="m 40,130 c 0,0 60,-80 120,-80 60,0 74.00337,80 140,80 65.99663,0 80,-80 140,-80 60,0 120,80 120,80" />
    </defs>
    <text style="stroke: #000000;">
        <textPath startOffset="0" id="texto" xlink:href="#myPath">Testing this text</textPath>
    </text>
</svg>

这篇关于在蛇SVG动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！