Compare Revisions

SVG In HTML Introduction

Revision 54277:

Revision 54277 by tomchen1989 on

Revision 54278:

Revision 54278 by Neformal.lviv on

Title:
SVG In HTML Introduction
SVG In HTML Introduction
Slug:
SVG_In_HTML_Introduction
SVG_In_HTML_Introduction
Tags:
SVG
SVG
Content:

Revision 54277
Revision 54278
n10    <h3 name="Overview">n10    <h3 id="Overview" name="Overview">
n16    <h3 name="Source">n16    <h3 id="Source" name="Source">
n27stop.begin { stop-color:yellow; }n27  stop.begin { stop-color:yellow; }
28stop.end { stop-color:green; }28  stop.end { stop-color:green; }
29body.invalid stop.end { stop-color:red; }29  body.invalid stop.end { stop-color:red; }
30#err { display:none; }30  #err { display:none; }
31body.invalid #err { display:inline; }31  body.invalid #err { display:inline; } 
n34function signalError() {n34  function signalError() {
35document.getElementById('body').setAttribute("class", "invalid");35    document.getElementById('body').setAttribute("class", "invali
 >d");
36}36  }
n40style="position:absolute; z-index:0; border:1px solid black; leftn40  style="position:absolute; z-index:0; border:1px solid black; le
>:5%; top:5%; width:90%; height:90%;"&gt;>ft:5%; top:5%; width:90%; height:90%;"&gt;
n42&lt;fieldset&gt;n42  &lt;fieldset&gt;
43&lt;legend&gt;HTML Form&lt;/legend&gt;43    &lt;legend&gt;HTML Form&lt;/legend&gt;
44&lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;44    &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
45&lt;input type="text"/&gt;45    &lt;input type="text"/&gt;
46&lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;46    &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
47&lt;p&gt;&lt;input type="button" value="Activate!" onclick="signa47    &lt;p&gt;&lt;input type="button" value="Activate!" onclick="s
>lError();" /&gt;&lt;/p&gt;>ignalError();" /&gt;&lt;/p&gt;
48&lt;/fieldset&gt;48  &lt;/fieldset&gt;
nn50 
n51viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"n52  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
52style="width:100%; height:100%; position:absolute; top:0; left:0;53  style="width:100%; height:100%; position:absolute; top:0; left:
> z-index:-1;"&gt;>0; z-index:-1;"&gt;
53&lt;linearGradient id="gradient"&gt;54  &lt;linearGradient id="gradient"&gt;
54&lt;stop class="begin" offset="0%"/&gt;55    &lt;stop class="begin" offset="0%"/&gt;
55&lt;stop class="end" offset="100%"/&gt;56    &lt;stop class="end" offset="100%"/&gt;
56&lt;/linearGradient&gt;57  &lt;/linearGradient&gt;
57&lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gr58  &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#
>adient)" /&gt;>gradient)" /&gt;
58&lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&g59  &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /
>t;>&gt;
n63    <h3 name="Discussion">n64    <h3 id="Discussion" name="Discussion">
n99    <h3 name="Details">n100    <h3 id="Details" name="Details">
t111    <h3 name="Related_Links">t112    <h3 id="Related_Links" name="Related_Links">

Back to History