<svg viewBox="0 0 200 200">
<defs>
<linearGradient id="grad-0" gradientUnits="userSpaceOnUse" x1="100" y1="50" x2="100" y2="125" spreadMethod="reflect">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="200" height="200" fill="url(#grad-0)"/>
<text x="50" y="125" style="font-size:4px;">spreadMethod="reflect"</text>
</svg>
<svg viewBox="0 0 200 200">
<defs>
<linearGradient id="grad-2" gradientUnits="userSpaceOnUse" x1="100" y1="50" x2="100" y2="125" spreadMethod="repeat">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="200" height="200" fill="url(#grad-2)"/>
<text x="50" y="125" style="font-size:4px;">spreadMethod="repeat"</text>
</svg>
<svg viewBox="0 0 200 200">
<defs>
<linearGradient id="grad-1" gradientUnits="userSpaceOnUse" x1="100" y1="50" x2="100" y2="125" spreadMethod="pad">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="200" height="200" fill="url(#grad-1)"/>
<text x="50" y="125" style="font-size:4px;">spreadMethod="pad"</text>
</svg>
반응형
'svg' 카테고리의 다른 글
| svg radialGradient and transform (0) | 2023.10.18 |
|---|---|
| svg radialGradient gradientTransform : skewX (0) | 2023.10.17 |
| svg view tag with animation (0) | 2023.10.15 |
| svg animate tag ; rectangle to morph (0) | 2023.10.15 |
| svg view tag ; zoom in /out (0) | 2023.10.14 |
