mirror of
https://github.com/swc-project/swc.git
synced 2024-12-20 04:01:39 +03:00
127 lines
4.6 KiB
HTML
127 lines
4.6 KiB
HTML
<!doctype html><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>Введите что-нибудь:</label>
|
||
<input type="text"/>
|
||
<span id="err">Incorrect value!</span></p>
|
||
<p><input type="button" value="Activate!" onclick="signalError();" /></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;" baseProfile="test">
|
||
<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>
|
||
|
||
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
|
||
<filter id="noise1" x="0" y="0" width="100%" height="100%">
|
||
<feTurbulence baseFrequency="0.025" />
|
||
</filter>
|
||
<filter id="noise2" x="0" y="0" width="100%" height="100%">
|
||
<feTurbulence baseFrequency="0.05" />
|
||
</filter>
|
||
|
||
<rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" />
|
||
<rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translateX(220px);" />
|
||
</svg>
|
||
|
||
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
|
||
<text xml:lang="en-US">This is some English text</text>
|
||
</svg>
|
||
|
||
<svg version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
width="200" height="200">
|
||
<image x="90" y="-65" width="128" height="146" transform="rotate(45)"
|
||
xlink:href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png"/>
|
||
</svg>
|
||
|
||
<svg viewBox="0 0 140 50" xmlns="http://www.w3.org/2000/svg">
|
||
<text y="20" xml:space="default">Default spacing</text>
|
||
<text y="40" xml:space="preserve">Preserved spacing</text>
|
||
</svg>
|
||
|
||
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
|
||
<text xml:lang="en-US">This is some English text</text>
|
||
<a xlink:href= "http://example.com/link/" xlink:title="The link leads to an example page that is of little interest">
|
||
<text x="10" y="25" >An example link.</text>
|
||
</a>
|
||
</svg>
|
||
|
||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||
<style>
|
||
div {
|
||
color: white;
|
||
font: 18px serif;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
</style>
|
||
|
||
<polygon points="5,5 195,10 185,185 10,195" />
|
||
|
||
<!-- Common use case: embed HTML text into SVG -->
|
||
<foreignObject x="20" y="20" width="160" height="160">
|
||
<!--
|
||
In the context of SVG embedded in an HTML document, the XHTML
|
||
namespace could be omitted, but it is mandatory in the
|
||
context of an SVG document
|
||
-->
|
||
<div xmlns="http://www.w3.org/1999/xhtml">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
|
||
porta vel dui convallis, rutrum imperdiet eros. Aliquam
|
||
erat volutpat.
|
||
</div>
|
||
</foreignObject>
|
||
</svg>
|
||
|
||
<svg style="font-size: 20px" width="400px" height="220px" viewBox="0 0 200 110">
|
||
<g transform="translate(10,80)">
|
||
<path d="M 0 0 L 150 0 A 75 75 0 0 0 0 0
|
||
M 30 0 L 30 -60 M 30 -10 L 40 -10 L 40 0"
|
||
fill="none" stroke="black"></path>
|
||
<text transform="translate(10,20)">1</text>
|
||
<switch transform="translate(35,-40)">
|
||
<foreignObject width="200" height="50"
|
||
requiredExtensions="http://www.w3.org/1998/Math/MathML">
|
||
<math>
|
||
<msqrt>
|
||
<mn>2</mn>
|
||
<mi>r</mi>
|
||
<mo>−</mo>
|
||
<mn>1</mn>
|
||
</msqrt>
|
||
</math>
|
||
</foreignObject>
|
||
<text>\sqrt{2r - 1}</text>
|
||
</switch>
|
||
</g>
|
||
</svg>
|
||
|
||
</body>
|
||
</html> |