제9장. Gradient & Pattern

제9장. Gradient & Pattern

그래디언트(Gradient)

SVG에서 지원되는 그래디언트
- 선형 그래디언트 <linearGradient id="..." 속성들 > 그래디언트 내용 </linearGradient>
- 원형 그래디언트 <radialGradient id="..." 속성들 > 그래디언트 내용 </radialGradient>

사용 방법
- <defs> 에서 그래디언트 정의하고, fill 이나 stroke 에서 속성으로 참조(사용)

linearGradient

그래디언트 내용의 표현 : <stop>, <animate>, <set>, ...
- <stop offset="길이" stop-color="색상" stop-opacity="투명도"/>

<svg width="8cm" height="4cm" viewBox="0 0 800 400"> <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F00" /> <stop offset="35%" stop-color="#FF0" /> <stop offset="65%" stop-color="#0F0" /> <stop offset="95%" stop-color="#00F" /> </linearGradient> </defs> <rect fill="none" stroke="url(#MyGradient)" stroke-width="40" x="1" y="1" width="798" height="398"/> <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200"/> </svg> <stop offset="5%" stop-color="#F00" /> red <stop offset="65%" stop-color="#FF0" /> yellow <stop offset="35%" stop-color="#0F0" /> green <stop offset="95%" stop-color="#00F" /> blue <stop offset="5%" stop-color="#F00" /> red <stop offset="35%" stop-color="#0F0" /> green <stop offset="65%" stop-color="#FF0" /> yellow <stop offset="95%" stop-color="#00F" /> blue

그래디언트의 속성 <linearGradient id="..." 속성들 >
- gradientUnits = "userSpaceOnUse | objectBoundingBox"
- x1, y1, x2, y2 : 방향벡터(시작점과 끝점) - 그래디언트 변화의 방향변경이 가능
- gradientTransform = "<transform-list>"

<linearGradient id="MyGradient" gradientUnits = "userSpaceOnUse">
<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">

radialGradient

<radialGradient id="..." 속성들 >
- gradientUnits = "userSpaceOnUse | objectBoundingBox"
- cx, cy, r : 원형 그래디언트의 중심 및 크기
- fx, fy : 그래디언트 변화의 시작점

<radialGradient id="MyGradient" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="300" fx="400" fy="200"> <stop offset="5%" stop-color="red" /> <stop offset="35%" stop-color="yellow" /> <stop offset="65%" stop-color="green" /> <stop offset="95%" stop-color="blue" /> </radialGradient> <!-- 100%에 color 추가 -->　 ... <stop offset="95%" stop-color="blue" /> <stop offset="100%" stop-color="white" /> <!-- gradientUnits --> <radialGradient id="MyGradient" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5"> <!-- 그래디언트 색상의 중심 --> <!-- 100% stop-color 삭제 --> <radialGradient id="MyGradient" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.4" fx="0.2" fy="0.5">

패턴 (Pattern)

사용 방법
- <defs> 에서 패턴을 정의하고, fill 이나 stroke 에서 속성으로 참조(사용)

<pattern id="..." 속성들 >

patternUnits = "userSpaceOnUse | objectBoundingBox"
x, y, width, height : 패턴의 뷰포트 크기
viewBox : 패턴의 뷰박스
preserveAspectRatio="none" 인 경우 뷰포트에 크기 맞춤

<svg width="8cm" height="4cm" viewBox="0 0 800 400"> <defs> <pattern id="TriPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10" > <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" /> </pattern> </defs> <rect fill="none" stroke="blue" stroke-width="5" x="1" y="1" width="798" height="398"/> <ellipse fill="url(#TriPattern)" stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" /> </svg> <pattern id="TriPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" viewBox="0 0 10 10" > <pattern id="TriPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="60" height="20" viewBox="0 0 10 10" preserveAspectRatio="none" >