Clipping and masking : clipping example

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

<svg width="500" height="500" >

<defs>
    <clipPath>
      <ellipse cx="200" cy="220" rx="80" ry="120" id="myClip" />
    </clipPath>
</defs>

<g style="text-rendering:optimizeLegibility;shape-rendering:default" >
<text x="5" y="25" style="font-size:24">SVG Demo: An image clipped by an ellipse.</text>

<ellipse cx="200" cy="220" rx="90" ry="130" style="fill:#CE8A77" />
<image x="40" y="100" width="320" height="240" xlink:href="krl1.jpg" style="clip-path:URL(#myClip)"/>
</g>
</svg>

Didier Courtaud
The SVG language
Novembre 2001

59 / 74