Затухание текста справа налево в SVG (1.1) - PullRequest
Новая
       20

Затухание текста справа налево в SVG (1.1)

1 голос
/ 23 октября 2019

Я новичок в SVG и пытаюсь угаснуть в тексте справа налево, используя SVG (1.1) . Я создал простой путь анимации из codepen.io, и теперь я хочу, чтобы текст каждого персонажа появлялся один за другим. например, у нас есть текст «Я - анимация», поэтому, как только анимация начинается, сначала n всплывающее окно с буквой, затем [ oitamia ] каждый символ один за другим, как анимация, исчезает в концепуть SVG. Я пробовал с непрозрачностью и свойствами перехода, но не работал должным образом. 

document.getElementById("pathX").setAttribute("d",document.getElementById("svgPath").getAttribute("d"));
var tl = new TimelineMax({repeat:-1});


tl.to("#Text",20,{attr:{
startOffset:'100%'

}
}

);
@import url(https://fonts.googleapis.com/css?family=Oswald);

body{ background-color: #FFF;}
svg{
  overflow:visible;
  left:5%;  top:25%;  position:absolute;
  transform: translate(-50%,-50%);
 -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
 
}
<head>
    <title>Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
</head>

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="363.652px" height="363.954px" 
	 viewBox="-70 30 363.652 363.954" enable-background="new 0 0 363.652 363.954"
     xml:space="preserve" >
   
	<defs><path  id="pathX"/></defs>
    <path  id="svgPath" fill="none" stroke="black" stroke-miterlimit="10" 		
		d="M 150 200 L 500 200 A 50 50 0 1 1 500 350"
	/>
	
	
    <text font-size="40px" style="fill-opacity:5" >
         <textPath id="Text" fill='blue' font-family=arial xlink:href="#pathX" startOffset="0">
		   I am animation
		 </textPath>
    </text>
</svg>
...