<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="red" /> <stop offset="50%" stop-color="yellow" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="310" cy="100" r="100" fx="310" fy="100" gradientTransform="skewX(20) translate(-35,0)" > <stop offset="0%" stop-color="red" /> <stop offset="50%" stop-color="yellow" /> <stop offset="100%" stop-color="black" /> </radialGradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="210" y="0" rx="50" ry="50" width="200" height="200" fill="url(#gradient2)" > <animateTransform attributeName="transform" type="rotate" values="0 310 100;360 310 100" begin="0" dur="3s" repeatCount="indefinite"/> </rect> </svg>
반응형
'svg' 카테고리의 다른 글
svg animations; <g> tag <use> tag (1) | 2023.10.21 |
---|---|
svg path skewX ; one wheel (0) | 2023.10.20 |
svg radialGradient gradientTransform : skewX (0) | 2023.10.17 |
svg rect linearGradient spreadMethod (0) | 2023.10.17 |
svg view tag with animation (0) | 2023.10.15 |