<svg width="500" height="500" viewBox="0 0 200 200" style="overflow:visible"> <style> </style> <defs> </defs> <g id="g1"> <circle id="circle1" cx="100" cy="100" r="10" fill="maroon" stroke="black"></circle> <rect id="rect1" x="150" y="90" width="20" height="20" rx="2" ry="2" fill="skyblue"></rect> </g> <g id="g2"> <animate id="anim1" href="#circle1" attributeName="cy" begin="0s" dur="3s" to="200" fill="freeze"/> <animate id="anim2" href="#rect1" attributeName="y" begin="anim1.end" dur="3s" to="190" fill="freeze"/> </g> </svg> <svg width="500" height="500" viewBox="0 0 200 200" style="overflow:visible"> <style> </style> <defs> </defs> <g id="g1"> <circle id="circle1" cx="100" cy="100" r="10" fill="maroon" stroke="black"> <animate attributeName="cy" begin="0s" dur="3s" to="200" fill="freeze"/> </circle> <rect id="rect1" x="150" y="90" width="20" height="20" rx="2" ry="2" fill="skyblue"> <animate attributeName="y" begin="anim1.end" dur="3s" to="190" fill="freeze"/> </rect> </g> <g id="g2"> </g> </svg>
반응형
'svg' 카테고리의 다른 글
| svg animation ; values attribute (0) | 2023.10.24 |
|---|---|
| svg animation ; transform-box:fill-box (0) | 2023.10.22 |
| svg animations; <g> tag <use> tag (1) | 2023.10.21 |
| svg path skewX ; one wheel (0) | 2023.10.20 |
| svg radialGradient and transform (0) | 2023.10.18 |
