html + css

radialGradient

폴리프레임 2025. 1. 7. 21:01
반응형

<radialGradient> 요소에서 cx와 cy 속성은 그라디언트의 중심 좌표를 설정하는 데 사용됩니다. 이 좌표는 SVG 좌표 시스템을 기준으로 하며, 단위를 사용하지 않으면 0에서 1 사이의 비율로 해석됩니다.

  • cx: 그라디언트의 중심의 x좌표를 설정합니다.
  • cy: 그라디언트의 중심의 y좌표를 설정합니다.
<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% 지점에 위치하도록 설정합니다.