Animation attribute (width, opacity, etc.) |
---|
Animation coordinates (groupe) |
---|
Animation rotate/translate/skewX/skewY/scale/matrix |
---|
Animation by path |
---|
Animation by path id |
---|
<animateMotion begin="0s" dur="6s" repeatcount="indefinite" rotate="auto">
<mpath xlink:href="#chemin"/>
</animateMotion>
Blur filter |
---|
<filter height="200%" width="200%" y="-50%" x="-50%" id="blur">
<feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
</filter>
</defs>
<rect width="100" height="100" fill="red" filter="url(#blur)"/>
Linear gradient |
---|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="gold" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad1)"/>
Radial gradient |
---|
<radialGradient id="grad2">
<stop offset="0%" stop-color="gold"/>
<stop offset="100%" stop-color="red"/>
</radialGradient>
</defs>
<rect width="100" height="100" fill="url(#grad2)"/>
Use |
---|
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clone" transform="translate(100 100)"/>
Rotation couleurs |
---|
<fecolormatrix type="hueRotate">
<animate attributename="values" begin="0s" dur="24s" values="0;360;0" repeatcount="indefinite"/>
</fecolormatrix>
</filter>
<rect width="100" height="100" fill="red" filter="url(#fecolor)"/>
Filtre Saturation |
---|
<feColorMatrix in="SourceGraphic" type="saturate" values="0" />
</filter>
<rect width="100" height="100" fill="#f00" filter="url(#gray)"/>
Masque |
---|
<mask id="hide">
<rect width="100" height="100"/>
</mask>
</defs>
<circle cx="100" cy="100" r="100" fill="#fff" style="mask:url(#hide)"/>