1# Defining Animations for SVG Components 2 3You can use child components in the **\<svg>** component to animate attributes over time. 4 5## Attribute Style Animation 6 7In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the **\<svg>** component, set **attributeName** to the attribute you want to animate, **from** to the animation start value, and **to** to the animation end value. 8 9 10```html 11<!-- xxx.hml --> 12<div class="container"> 13 <svg> 14 <text x="300" y="300" fill="blue"> 15 Hello 16 <animate attributeName="font-size" from="30" to="60" dur="3s" repeatCount="indefinite"> 17 </animate> 18 <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite"> 19 </animate> 20 <animate attributeName="opacity" from="1" to="0.3" dur="3s" repeatCount="indefinite"> 21 </animate> 22 </text> 23 <text x="300" y="600" fill="blue"> 24 World 25 <animate attributeName="font-size" from="30" to="60" values="30;80" dur="3s" repeatCount="indefinite"> 26 </animate> 27 <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite"> 28 </animate> 29 <animate attributeName="opacity" from="0.3" to="1" dur="3s" repeatCount="indefinite"> 30 </animate> 31 </text> 32 </svg> 33</div> 34``` 35 36 37 38> **NOTE** 39> 40> When values is also set, the from and to settings do not take effect. 41 42## Motion Path Animation 43 44In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the <svg> component, set path to define a shape for the animation. 45 46 47```html 48<!-- xxx.hml --> 49<div class="container"> 50 <svg fill="white" width="800" height="900"> 51 <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="white" stroke="blue" stroke-width="5" > 52 </path> 53 <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z" > 54 <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="M300,200 h-150 a150 150 0 1 0 150 -150 z"> 55 </animateMotion> 56 </path> 57 </svg> 58</div> 59``` 60 61 62 63## animateTransform Animation 64 65In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the **\<svg>** component, set attributeName to bind the corresponding attribute to the **transform** attribute, and set **type** to the animation type, **from** to the start value, and **to** to the end value. 66 67 68```html 69<!-- xxx.hml --> 70<div class="container" style=""> 71 <svg> 72 <line x1="90" y1="300" x2="90" y2="730" stroke-width="10" stroke="black" stroke-linecap="round"> 73 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" 74 fill="freeze"> 75 </animateTransform> 76 </line> 77 <circle cx="500" cy="500" r="50" stroke-width="15" fill="red" stroke="#e70d0d"> 78 <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" fill="freeze"> 79 </animateTransform> 80 <animateTransform attributeName="transform" attributeType="XML" type="scale" dur="6s" values="1;1;1.3" keyTimes="0;0.5;1" fill="freeze"></animateTransform> 81 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0;0;300 7" keyTimes="0;0.6;0.9" fill="freeze"></animateTransform> 82 </circle> 83 <rect width="500" height="200" x="90" y="840"> 84 <animateTransform attributeName="transform" attributeType="XML" type="skewY" dur="6s" values="0;0;30" keyTimes="0;0.5;1" fill="freeze"></animateTransform> 85 </rect> 86 <line x1="650" y1="300" x2="650" y2="600" stroke-width="20" stroke="blue" stroke-linecap="round"> 87 <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0;0;0 800" keyTimes="0;0.6;1" fill="freeze"></animateTransform> 88 </line> 89 </svg> 90</div> 91``` 92 93 94```css 95/* xxx.css */ 96.container { 97 flex-direction: column; 98 align-items: center; 99 width: 100%; 100 height: 100%; 101 background-color: #F1F3F5; 102} 103``` 104 105
