SVG Textpath — анимация startOffset (текст для скольжения по пути SVG) — в JS

Как мне анимировать параметр SVG textpath startOffset в WebAnimation/JS (НЕ CSS!):
Я хочу, чтобы текст скользил по пути... Я пробовал numbers, %, px безуспешно.

<svg id="text-on-path-svg" width="400" height="400"  style="border:1px solid #00f"> 
<path id="myPathforText" fill="none" stroke="#000" d="M90,90C90,160 250,160 300,300"/>
<text >
    <textpath id="slideText" xlink:href="#myPathforText" startOffset="50%" >Text laid out along a path.</textpath>
</text>

<script type="text/ecmascript">
  <![CDATA[

var slideText=document.getElementById("slideText");
var slideTextPlayer=slideText.animate(
     [{startOffset:'0%'},
      {startOffset:'100%'}],
     {duration:3000,delay:0,iterations:Infinity});
]]>
</script>
</svg>

JSFiddle: https://jsfiddle.net/509c8pmj/ Будем очень признательны за помощь.


javascript svg web-animations
person ajo    schedule 07.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Один из способов — поместить элемент animate внутри элемента textpath, например так:

<textpath id="slideText" xlink:href="#myPathforText" startOffset="50%" >
    Text laid out along a path.
    <animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="3s" repeatCount="indefinite"/>
</textpath>

Вы можете использовать repeatCount="indefinite", если хотите, чтобы он продолжал зацикливаться.

Я изучал синтаксис SVG + SMIL из статей на https://css-tricks.com ( но их сайт был недоступен для меня, когда я пишу это.)

person MarcusFromNZ    schedule 09.09.2016