linearGradient in SVG

Posted on
  1. You are in : HTML5  >>  Working with Scalable Vector Graphics  >>  

linearGradient lets authors define linear gradients to fill or stroke graphical elements.

<!DOCTYPE HTML>
<html>
    <head>
        <title>SVG tutorial</title>
    </head>
    <body>
        <svg width="120" height="120">
            <defs>
                <linearGradient id="MyGradient">
                    <stop offset="5%" stop-color="green"/>
					<stop offset="95%" stop-color="gold"/>
                </linearGradient>
            </defs>
		<rect fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>
        </svg>
    </body>
</html>