0

(CSS ではなく) でSVG テキストパスstartOffsetパラメータをアニメーション化するにはどうすればよいですか: テキストをパスに沿ってスライドさせたい... を試しましたが、成功しませんでした。WebAnimation/JS
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/ 助けていただければ幸いです。

4

1 に答える 1

0

1 つの方法は、次のように、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"ループし続けたい場合に使用できます。

私はhttps://css-tricks.comの記事から SVG + SMIL 構文のいくつかを学んでいます(しかし、私がこれを書いているとき、彼らのサイトはダウンしていました)。

于 2016-09-09T05:56:51.200 に答える