Scalable Vector Graphics: differenze tra le versioni

Versione delle 10:52, 28 feb 2021

Versione delle 03:55, 16 mar 2021

Riga 197:

Un ricco set di gestori di eventi come " ''onmouseover"'' e " ''onclick"'' può essere assegnato a qualsiasi oggetto grafico SVG per applicare azioni ed eventi<ref>{{Cita web|url=https://www.cnet.com/news/w3c-releases-scripting-standard-caveat/|titolo=W3C releases scripting standard, caveat|autore=Paul Festa|sito=CNET|lingua=en|accesso=2021-01-19}}</ref>.

==== Animazione SVG utilizzando SMIL ====

<syntaxhighlight lang="html">

<animateTransform

attributeName="transform"

attributeType="XML"

type="rotate"

from="0"

to="360"

begin="0s"

dur="1s"

repeatCount="indefinite"/>

</syntaxhighlight>

==== Animazione SVG usando CSS3 ====

<syntaxhighlight lang="html">

<style type="text/css">

@keyframes rot_kf {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

.rot { animation: rot_kf 1s linear infinite; }

</style>

</syntaxhighlight>

==== Animazione SVG usando ECMAScript ====

<syntaxhighlight lang="ecmascript">

<script type="text/ecmascript">

function rotate(evt) {

var object = evt.target.ownerDocument.getElementById('rot');

setInterval(function () {

var now = new Date();

var milliseconds = now.getTime() % 1000;

var degrees = milliseconds * 0.36;

object.setAttribute('transform', 'rotate(' + degrees + ')');

}, 20);

}

</script>

</syntaxhighlight>

=== Dati Exif ===

Line 207 ⟶ 246:

=== Immagini raster in SVG ===

Nel codice svg si possono incorporare o collegare immagini raster (o bitmap) come jpg, png o gif.

Immagine collegata:<syntaxhighlight lang="html">

<svg ... >

<image xlink:href="/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />

</svg>

</syntaxhighlight>Immagine incorporata:<syntaxhighlight lang="html">

<svg>

<image

y="130.35181"

x="47.050488"

id="image6820"

xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2../>

</svg>

</syntaxhighlight>