mirror of
https://github.com/swc-project/swc.git
synced 2024-12-22 05:01:42 +03:00
373 lines
7.1 KiB
Plaintext
373 lines
7.1 KiB
Plaintext
| <html>
|
||
| xmlns="http://www.w3.org/1999/xhtml"
|
||
| <head>
|
||
| "
|
||
"
|
||
| <title>
|
||
| "XTech SVG Demo"
|
||
| "
|
||
"
|
||
| <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; }
|
||
"
|
||
| "
|
||
"
|
||
| <script>
|
||
| "
|
||
function signalError() {
|
||
document.getElementById('body').setAttribute("class", "invalid");
|
||
}
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| <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"
|
||
| "
|
||
"
|
||
| <p>
|
||
| <label>
|
||
| "Введите что-нибудь:"
|
||
| "
|
||
"
|
||
| <input>
|
||
| type="text"
|
||
| "
|
||
"
|
||
| <span>
|
||
| id="err"
|
||
| "Incorrect value!"
|
||
| "
|
||
"
|
||
| <p>
|
||
| <input>
|
||
| onclick="signalError();"
|
||
| type="button"
|
||
| value="Activate!"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| baseProfile="test"
|
||
| preserveAspectRatio="xMidYMid slice"
|
||
| style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"
|
||
| version="1.1"
|
||
| viewBox="0 0 100 100"
|
||
| xmlns="http://www.w3.org/2000/svg"
|
||
| "
|
||
"
|
||
| <svg linearGradient>
|
||
| id="gradient"
|
||
| "
|
||
"
|
||
| <svg stop>
|
||
| class="begin"
|
||
| offset="0%"
|
||
| "
|
||
"
|
||
| <svg stop>
|
||
| class="end"
|
||
| offset="100%"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| <svg rect>
|
||
| height="100"
|
||
| style="fill:url(#gradient)"
|
||
| width="100"
|
||
| x="0"
|
||
| y="0"
|
||
| "
|
||
"
|
||
| <svg 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"
|
||
| "
|
||
"
|
||
| <svg filter>
|
||
| height="100%"
|
||
| id="noise1"
|
||
| width="100%"
|
||
| x="0"
|
||
| y="0"
|
||
| "
|
||
"
|
||
| <svg feTurbulence>
|
||
| baseFrequency="0.025"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| <svg filter>
|
||
| height="100%"
|
||
| id="noise2"
|
||
| width="100%"
|
||
| x="0"
|
||
| y="0"
|
||
| "
|
||
"
|
||
| <svg feTurbulence>
|
||
| baseFrequency="0.05"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg rect>
|
||
| height="200"
|
||
| style="filter: url(#noise1);"
|
||
| width="200"
|
||
| x="0"
|
||
| y="0"
|
||
| "
|
||
"
|
||
| <svg rect>
|
||
| height="200"
|
||
| style="filter: url(#noise2); transform: translateX(220px);"
|
||
| width="200"
|
||
| x="0"
|
||
| y="0"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| viewBox="0 0 200 100"
|
||
| xmlns="http://www.w3.org/2000/svg"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| xml lang="en-US"
|
||
| "This is some English text"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| height="200"
|
||
| version="1.1"
|
||
| width="200"
|
||
| xmlns xlink="http://www.w3.org/1999/xlink"
|
||
| xmlns="http://www.w3.org/2000/svg"
|
||
| "
|
||
"
|
||
| <svg image>
|
||
| height="146"
|
||
| xlink href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png"
|
||
| transform="rotate(45)"
|
||
| width="128"
|
||
| x="90"
|
||
| y="-65"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| viewBox="0 0 140 50"
|
||
| xmlns="http://www.w3.org/2000/svg"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| xml space="default"
|
||
| y="20"
|
||
| "Default spacing"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| xml space="preserve"
|
||
| y="40"
|
||
| "Preserved spacing"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| viewBox="0 0 200 100"
|
||
| xmlns="http://www.w3.org/2000/svg"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| xml lang="en-US"
|
||
| "This is some English text"
|
||
| "
|
||
"
|
||
| <svg a>
|
||
| xlink href="http://example.com/link/"
|
||
| xlink title="The link leads to an example page that is of little interest"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| x="10"
|
||
| y="25"
|
||
| "An example link."
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| viewBox="0 0 200 200"
|
||
| xmlns="http://www.w3.org/2000/svg"
|
||
| "
|
||
"
|
||
| <svg style>
|
||
| "
|
||
div {
|
||
color: white;
|
||
font: 18px serif;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg polygon>
|
||
| points="5,5 195,10 185,185 10,195"
|
||
| "
|
||
|
||
"
|
||
| <!-- Common use case: embed HTML text into SVG -->
|
||
| "
|
||
"
|
||
| <svg foreignObject>
|
||
| height="160"
|
||
| width="160"
|
||
| x="20"
|
||
| y="20"
|
||
| "
|
||
"
|
||
| <!--
|
||
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.
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
"
|
||
| <svg svg>
|
||
| height="220px"
|
||
| style="font-size: 20px"
|
||
| viewBox="0 0 200 110"
|
||
| width="400px"
|
||
| "
|
||
"
|
||
| <svg g>
|
||
| transform="translate(10,80)"
|
||
| "
|
||
"
|
||
| <svg 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"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| transform="translate(10,20)"
|
||
| "1"
|
||
| "
|
||
"
|
||
| <svg switch>
|
||
| transform="translate(35,-40)"
|
||
| "
|
||
"
|
||
| <svg foreignObject>
|
||
| height="50"
|
||
| requiredExtensions="http://www.w3.org/1998/Math/MathML"
|
||
| width="200"
|
||
| "
|
||
"
|
||
| <math math>
|
||
| "
|
||
"
|
||
| <math msqrt>
|
||
| "
|
||
"
|
||
| <math mn>
|
||
| "2"
|
||
| "
|
||
"
|
||
| <math mi>
|
||
| "r"
|
||
| "
|
||
"
|
||
| <math mo>
|
||
| "−"
|
||
| "
|
||
"
|
||
| <math mn>
|
||
| "1"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| <svg text>
|
||
| "\sqrt{2r - 1}"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
"
|
||
| "
|
||
|
||
|
||
"
|