44 lines
1.3 KiB
XML
44 lines
1.3 KiB
XML
<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>
|