1# animateTransform 2 3 4> **NOTE** 5> 6> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 7 8The **\<animateTransform>** component is used to apply a transform animation and supports the following components: 9 10 11<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> 12 13## Required Permissions 14 15None 16 17 18## Child Components 19 20Not supported 21 22 23## Attributes 24 25The **animate** attributes and the attributes in the following table are supported. 26 27| Name| Type| Default Value| Mandatory| Description| 28| -------- | -------- | -------- | -------- | -------- | 29| type | [translate \| scale \| rotate \| skewX \| skewY] | - | Yes| Transform animation type.| 30 31 32## Example 33 34```html 35<!-- xxx.hml --> 36<div class="container"> 37 <div class="back_container"> 38 <svg> 39 <polygon points="60,30 90,90 30,90" fill="red"> 40 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 120 140" to="360 360 420" dur="3s" repeatCount="indefinite"></animateTransform> 41 </polygon> 42 <polygon points="60,30 90,90 30,90" fill="red"> 43 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animateTransform> 44 </polygon> 45 <polygon points="60,30 90,90 30,90" fill="green"> 46 <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s" repeatCount="indefinite"></animateTransform> 47 </polygon> 48 <polygon points="60,30 90,90 30,90" fill="green"> 49 <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 4" dur="3s" repeatCount="indefinite"></animateTransform> 50 </polygon> 51 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 52 <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform> 53 </polygon> 54 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 55 <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform> 56 </polygon> 57 <polygon points="60,30 90,90 30,90" fill="#D2691E"> 58 <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform> 59 <animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform> 60 </polygon> 61 <polygon points="60,30 90,90 30,90" fill="blue"> 62 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" dur="3s" repeatCount="indefinite"></animateTransform> 63 </polygon> 64 <polygon points="60,30 90,90 30,90" fill="blue"> 65 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 300" dur="3s" repeatCount="indefinite"></animateTransform> 66 </polygon> 67 <polygon points="60,30 90,90 30,90" fill="blue"> 68 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="300 300" dur="3s" repeatCount="indefinite"></animateTransform> 69 </polygon> 70 </svg> 71 </div> 72</div> 73``` 74 75```css 76/* xxx.css */ 77.container { 78 flex-direction: column; 79 justify-content: flex-start; 80 align-items: flex-start; 81 background-color: #f8f8ff; 82} 83 84.back_container { 85 flex-direction: row; 86 justify-content: flex-start; 87 align-items: flex-start; 88 height: 1000px; 89 width: 1080px; 90} 91``` 92 93 94 95 96 97Animation overlay 98 99 100```html 101<!-- xxx.hml --> 102<div class="container"> 103 <div class="back_container"> 104 <svg> 105 <polygon points="60,30 90,90 30,90" fill="black"> 106 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 107 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 108 </polygon> 109 <polygon points="60,30 90,90 30,90" fill="green"> 110 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 111 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 112 <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0; 113 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 114 </polygon> 115 <polygon points="60,30 90,90 30,90" fill="blue"> 116 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 117 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 118 <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2" 119 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 120 </polygon> 121 <polygon points="60,30 90,90 30,90" fill="red"> 122 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0; 123 600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform> 124 <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2" 125 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 126 <animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10" 127 keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform> 128 </polygon> 129 </svg> 130 </div> 131</div> 132``` 133 134 135```css 136/* xxx.css */ 137.container { 138 flex-direction: column; 139 justify-content: flex-start; 140 align-items: flex-start; 141 background-color: #f8f8ff; 142} 143.back_container { 144 flex-direction: row; 145 justify-content: flex-start; 146 align-items: flex-start; 147 height: 1000px; 148 width: 1080px; 149} 150``` 151 152 153 154 155 156Example of involved components 157 158 159```html 160<!-- xxx.hml --> 161<div class="container"> 162 <div class="back_container"> 163 <svg> 164 <svg fill="white" width="600" height="600" viewBox="0 0 50 50"> 165 <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" 166 d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5,3"> 167 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="25" 168 dur="3s" repeatCount="indefinite"></animateTransform> 169 </path> 170 </svg> 171 <polygon points="60,20 90,80 30,80" fill="black"> 172 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 173 dur="3s" repeatCount="indefinite"></animateTransform> 174 </polygon> 175 <circle cx="60" cy="130" r="40" stroke-width="4" fill="white" stroke="blue"> 176 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 177 dur="3s" repeatCount="indefinite"></animateTransform> 178 </circle> 179 <line x1="10" x2="300" y1="280" y2="280" stroke-width="10" stroke="black" stroke-linecap="square"> 180 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 181 dur="3s" repeatCount="indefinite"></animateTransform> 182 </line> 183 <polyline points="10,380 50,335 50,385 100,310" fill="white" stroke="black"> 184 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 185 dur="3s" repeatCount="indefinite"></animateTransform> 186 </polyline> 187 <ellipse cx="100" cy="450" rx="70" ry="50" fill="blue"> 188 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 189 dur="3s" repeatCount="indefinite"></animateTransform> 190 </ellipse> 191 <rect width="100" height="100" x="50" y="540" stroke-width="10" stroke="red" rx="10" ry="10" 192 stroke-dasharray="5 3" stroke-dashoffset="3"> 193 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 194 dur="3s" repeatCount="indefinite"></animateTransform> 195 </rect> 196 <text x="20" y="700" fill="#D2691E" font-size="40"> 197 animate-transform 198 <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" 199 dur="3s" repeatCount="indefinite"></animateTransform> 200 </text> 201 </svg> 202 </div> 203</div> 204``` 205 206 207```css 208/* xxx.css */ 209.container { 210 flex-direction: column; 211 justify-content: flex-start; 212 align-items: flex-start; 213 background-color: #f8f8ff; 214} 215.back_container { 216 flex-direction: row; 217 justify-content: flex-start; 218 align-items: flex-start; 219 height: 1000px; 220 width: 1080px; 221} 222``` 223 224 225 226
