Panoramica
Questo articolo e l'esempio allegato mostrano come utilizzare SVG per inserire un'immagine di sfondo in un form. Mostra come JavaScript e i CSS possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento XHTML. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo HTML) e l'integrazione di SVG.
Ecco il codice dell' esempio:
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>XTech SVG Demo</title>
<style>
stop.begin { stop-color:yellow; }
stop.end { stop-color:green; }
body.invalid stop.end { stop-color:red; }
#err { display:none; }
body.invalid #err { display:inline; }
</style>
<script>
function signalError() {
document.getElementById('body').setAttribute("class", "invalid");
}
</script>
</head>
<body id="body"
style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
<form>
<fieldset>
<legend>HTML Form</legend>
<p><label>Enter something:</label>
<input type="text"/>
<span id="err">Incorrect value!</span></p>
<p><button onclick="signalError();">Activate!</button></p>
</fieldset>
</form>
<svg xmlns="https://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
</body>
</html>
Spiegazione
Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento <svg>. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.