<svg width="500" height="500" viewBox="0 0 500 500"> <style> #rect1 { transform-box: fill-box; transform-origin: 50% 50%; } </style> <defs> <pattern id="pattern1" width="100" height="100" viewBox="0 0 100 100" patternUnits="userSpaceOnUse" x="0" y="0" patternTransform="translate(150)"> <circle cx="50" cy="50" r="50" fill="#ff0000"></circle> <ellipse cx="50" cy="50" rx="30" ry="15" fill="#0000ff" style="opacity:.5"></ellipse> <circle cx="50" cy="50" r="10" fill="#ffff00"></circle> </pattern> </defs> <g id="g1"> <rect id="rect1" x="150" y="200" width="200" height="100" fill="url(#pattern1)" stroke="black"> <animateTransform attributeName="transform" type="rotate" values="0;360;0" additive="sum" fill="freeze" repeatCount="indefinite" begin="0" dur="3s"/> </rect> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg bike animation : This is for reference (0) | 2024.01.05 |
---|---|
svg animation : animateMotion with rotate attribute (0) | 2024.01.04 |
svg transform : translate, rotate with an example (0) | 2023.12.29 |
svg pattern : patternTransform attribute with matrix value (0) | 2023.12.29 |
svg pattern:animation (0) | 2023.12.26 |