<style>
svg {margin:100px;border:1px solid red;}
</style>
<svg width="200" height="200" viewBox="0 0 400 400">
<style>
#circle1 {animation: anim1 2s infinite;}
@keyframes anim1 {
0% {r:50;fill-opacity:.1}
100% {r:100;fill-opacity:.7}
}
</style>
<rect x="0" y="0" width="100%" height="100%" fill="gray"/>
<circle id="circle1" cx="25%" cy="50%" r="50" fill-opacity=".1" fill="red"/>
<circle id="circle1" cx="50%" cy="50%" r="50" fill-opacity=".1" fill="green"/>
<circle id="circle1" cx="75%" cy="50%" r="50" fill-opacity=".1" fill="blue"/>
</svg>
반응형
'svg' 카테고리의 다른 글
| svg animation example (0) | 2023.10.12 |
|---|---|
| svg viewBox ;understanding relative, abolute units and using group tag <g> (0) | 2023.10.12 |
| svg viewBox ; a coordinate system (0) | 2023.10.11 |
| svg mask :using transform attribute 2 (1) | 2023.10.10 |
| svg mask : using transform attribute (0) | 2023.10.10 |
