상세 컨텐츠

본문 제목

radialGradient

html + css

by 폴리프레임 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% 지점에 위치하도록 설정합니다.

'html + css' 카테고리의 다른 글

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

관련글 더보기