<!DOCTYPE html> <html> <body> <p><strong>Note:</strong> This example does not work in Firefox.</p> <p>This was inspired by W3Schools example</p> <svg width="100%" height="300px"> <defs> <radialGradient gradientUnits="userSpaceOnUse" cx="0" cy="0" r="100" id="gradient-0"> <stop offset="0" style="stop-color: rgb(216, 209, 16);"></stop> <stop offset="1" style="stop-color: rgb(23, 147, 112);"></stop> </radialGradient> </defs> <g id="R1" transform="translate(250 250)"> <ellipse rx="100" ry="0" opacity=".3" style="fill:url(#gradient-0);"> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" /> <animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" /> <animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" /> </ellipse> </g> <g transform="rotate(72 390 150)"> <use xlink:href="#R1" /></g> <g transform="rotate(144 390 150)" > <use xlink:href="#R1" /></g> <g transform="rotate(216 390 150)"> <use xlink:href="#R1" /></g> <g transform="rotate(288 390 150)"> <use xlink:href="#R1" /></g> </svg> </body> </html>
Note: This example does not work in Firefox.
This was inspired by W3Schools example
반응형
'svg' 카테고리의 다른 글
| svg animation ; transform-box:fill-box (0) | 2023.10.22 |
|---|---|
| svg animation : href attribute vs parentElement (2) | 2023.10.22 |
| svg path skewX ; one wheel (0) | 2023.10.20 |
| svg radialGradient and transform (0) | 2023.10.18 |
| svg radialGradient gradientTransform : skewX (0) | 2023.10.17 |
