<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <style> g {fill:red;} g>g {fill:green;} g>g>g {fill:blue;} g>g>g {fill:cyan;} g>g>g>g {fill:magenta;} g>g>g>g>g {fill:yellow;} g>g>g>g>g>g {fill:black;} g>g>g>g>g>g>g {fill:cadetblue;} g>g>g>g>g>g>g>g {fill:maroon;} g>g>g>g>g>g>g>g>g {fill:orange;} </style> <defs></defs> <g transform="matrix(1, 0, 0, 1, 55.878, 73.068)" stroke="#000" fill="#fff" style="transform-origin: 72.5px 0px;"> <path d="m0,0 h-20"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <g transform="translate(20,0)"> <path d="m0,0 h-15"></path> <circle r="5"></circle> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg mouse event : drag and drop (1) | 2024.01.24 |
---|---|
svg animation; roses (0) | 2024.01.23 |
svg: outermost svg tag and other container elements (0) | 2024.01.19 |
svg nested svg : animation with viewBox (0) | 2024.01.18 |
svg preserveAspectRatio : using viewport width,viewport height and nested svgs (0) | 2024.01.18 |