Clipping

Wat is clipping

Als u van een object een deel wil tonen kan u gebruik maken van clipping. Dat deel wordt uit het object geknipt en weer gegeven. De rest van het object wordt niet weergegeven.

De <clipPath></clipPath>-tag

Tussen deze tag, die u tussen <defs> en </defs> plaatst u de vorm waarin het object moet staan. Deze tag heeft alleen maar het attribuut id. Bij het object dat u wilt clippen plaatst u het attribuut clip-path, dat als waarde een gedefinieerde clipPath moet hebben.
Mogelijke subtags:
path | text | rect | circle | ellipse | line | polyline | polygon | use | animate | set | animateMotion | animateColor | animateTransform


Bijvoorbeeld:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="410px" height="465px" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip1">
<path d="M0,83C118,85 184,114 213,205C238,253 244,255 249,246C267,230 274,242 273,215C303,142 344,68 405,28C395,44 393,57 378,77C374,91 373,101 366,110C364,120 359,132 347,145C350,162 341,175 332,193C328,214 312,225 295,243C303,250 299,260 303,273C295,269 277,264 271,283C269,310 269,339 229,371C224,382 221,420 203,436C199,451 196,458 180,460L179,472L102,467C129,436 166,389 169,330C162,322 148,321 134,315C131,309 122,299 97,291C86,287 91,279 75,278C67,268 66,259 59,251C53,240 55,233 51,224C57,220 44,210 38,198C28,180 28,164 24,144C13,127 22,106 7,102zM204,396C194,403 183,418 190,435L193,429L198,430C201,424 203,408 204,401z M215,394L214,390C203,433 208,426 216,396z" />
</clipPath>
<filter id="mtrx1" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.02,0.02" numOctaves="6" seed="3" stitchTiles="noStitch"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 1 0 0 0 1 0 1 0 0 1 0 1 " />
</filter>
<filter id="mtrx2" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.02,0.02" numOctaves="6" seed="3" stitchTiles="noStitch"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 " />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="black" filter="url(#mtrx2)" />
<rect clip-path="url(#clip1)" x="0" y="0" width="100%" height="100%" fill="lightblue" filter="url(#mtrx1)" />
</svg>


Bij dit voorbeeld wordt uit het lichtblauwe gedeelte een vogel geknipt. (Bekijk dit voorbeeld).