mercredi 19 juillet 2017

Références


Animation attribute (width, opacity, etc.)
<animate attributeName="?" begin="0s" dur="6s" repeatCount="indefinite" values="0;0"/>

Animation coordinates (groupe)
<animateMotion begin="0s" dur="6s" repeatCount="indefinite" values="0,0;0,0"/>

Animation rotate/translate/skewX/skewY/scale/matrix
<animateTransform attributeName="transform" attributeType="xml" type="rotate" values="0 0 0; 360 0 0" begin="0s" dur="6s" repeatCount="indefinite"/>

Animation by path
<animateMotion begin="0s" dur="6s" repeatCount="indefinite" rotate="auto" path="m0 0L400 0L400 400L0 400z"/>

Animation by path id
<path id="chemin" d="m0 0L400 0L400 400L0 400z"/>
<animateMotion begin="0s" dur="6s" repeatcount="indefinite" rotate="auto">
<mpath xlink:href="#chemin"/>
</animateMotion>

Blur filter
<defs>
<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
<defs>
<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
<defs>
<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
<rect width="100" height="100" id="clone"/>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clone" transform="translate(100 100)"/>

Rotation couleurs
<filter id="fecolor">
<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
<filter id="gray">
<feColorMatrix in="SourceGraphic" type="saturate" values="0" />
</filter>
<rect width="100" height="100" fill="#f00" filter="url(#gray)"/>

Masque
<defs>
<mask id="hide">
<rect width="100" height="100"/>
</mask>
</defs>
<circle cx="100" cy="100" r="100" fill="#fff" style="mask:url(#hide)"/>