|
|
| xmlns="http://www.w3.org/1999/xhtml"
|
| "
"
|
| "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}"
| "
"
| "
"
| "
"
| "
"