Gradients et motifs : gradient linéaire

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "svg-19991203.dtd" >

<svg width="500px" height="600px" >
<g style="text-rendering:optimizeLegibility;shape-rendering:default">

    <defs>
      <linearGradient id="grad1" x1="0" y1="0" x2="400" y2="400">
        <stop offset="0%"   style="stop-color:#FF0000"/>
        <stop offset="25%" style="stop-color:#0000FF"/>
        <stop offset="50%" style="stop-color:#00FF00"/>
        <stop offset="75%" style="stop-color:#0000FF"/>
        <stop offset="100%" style="stop-color:#FF0000"/>
      </linearGradient>
    </defs>

<text x="5" y="20" style="font-size:22">SVG Demo: Linear gradients</text>

<path style="fill:url(#grad1)" d="M0 50 h200 v200 h-200 z"/>

<circle style="fill:url(#grad1)" cx="320" cy="150" r="100" />

<polygon style="fill:url(#grad1)" points="0,400,200,400,100,280" />

<ellipse style="fill:url(#grad1)" cx="300" cy="350" rx="100" ry="75"/>

<rect style="fill:url(#grad1)" x="0" y="450" width="400" height="100" />

</g>
</svg>

Didier Courtaud
Le langage SVG
25 Janvier 2000

55 / 74