<html xmlns="http://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="http://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>
Codebase Browser
chromium