| <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> |
