next plan previous Logo

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

Logo orateur