<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="100" cy="100" r="100" fx="100" 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="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translateX(220px);" /> </svg>
반응형
'svg' 카테고리의 다른 글
svg path skewX ; one wheel (0) | 2023.10.20 |
---|---|
svg radialGradient and transform (0) | 2023.10.18 |
svg rect linearGradient spreadMethod (0) | 2023.10.17 |
svg view tag with animation (0) | 2023.10.15 |
svg animate tag ; rectangle to morph (0) | 2023.10.15 |