<radialGradient> 요소에서 cx와 cy 속성은 그라디언트의 중심 좌표를 설정하는 데 사용됩니다. 이 좌표는 SVG 좌표 시스템을 기준으로 하며, 단위를 사용하지 않으면 0에서 1 사이의 비율로 해석됩니다.
<svg width="200" height="200" viewBox="-100 -100 200 200" style="background-color: lightgray">
<defs>
<radialGradient id="shine" cx="0.25" cy="0.25" r="0.35">
<stop offset="0%" stop-color="#e3a8b0" />
<stop offset="100%" stop-color="#d1495b" />
</radialGradient>
</defs>
<circle cx="0" cy="20" r="70" fill="url(#shine)" />
<circle cx="0" cy="-75" r="12" fill="none" stroke="#f79257" stroke-width="2" />
<rect x="-17.5" y="-65" width="35" height="20" fill="#f79257" />
</svg>
cx="0.25"와 cy="0.25"는 그라디언트 중심이 SVG 좌표 시스템의 좌측 상단에서 25% 지점에 위치하도록 설정합니다.
normalize.css 와 CssBaseline (1) | 2025.05.12 |
---|---|
콜론 - 단일 콜론, 이중 콜론 (1) | 2025.01.28 |
viewport, viewBox 비교 (0) | 2025.01.07 |
text-anchor (2) | 2025.01.07 |
@apply - tailwind css 에서 사용하는 이유 (1) | 2024.11.28 |