2022-05-14 04:43:52 +03:00
|
|
|
|
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml">
|
2022-04-22 14:20:47 +03:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2022-04-23 07:26:32 +03:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2022-04-25 11:26:08 +03:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2022-04-22 14:20:47 +03:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
