files/it/introduzione_a_svg_dentro_xhtml/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

---
title: Introduzione a SVG dentro XHTML
slug: Introduzione_a_SVG_dentro_XHTML
translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
---
<p> </p>
<h3 id="Panoramica" name="Panoramica">Panoramica</h3>
<p>Questo articolo e l'esempio allegato mostrano come utilizzare <a href="it/SVG">SVG</a> per inserire un'immagine di sfondo in un form. Mostra come <a href="it/JavaScript">JavaScript</a> e i <a href="it/CSS">CSS</a> possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento <a href="it/XHTML">XHTML</a>. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo <a href="it/HTML">HTML</a>) e l'integrazione di SVG.</p>
<p>Ecco il codice dell' <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">esempio</a>:</p>
<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
  &lt;title&gt;XTech SVG Demo&lt;/title&gt;
  &lt;style&gt;
    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; }
  &lt;/style&gt;
  &lt;script&gt;
    function signalError() {
      document.getElementById('body').setAttribute("class", "invalid");
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body id="body"
   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
  &lt;form&gt;
     &lt;fieldset&gt;
       &lt;legend&gt;HTML Form&lt;/legend&gt;
       &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
          &lt;input type="text"/&gt;
          &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
       &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
     &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;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;"&gt;
    &lt;linearGradient id="gradient"&gt;
      &lt;stop class="begin" offset="0%"/&gt;
      &lt;stop class="end" offset="100%"/&gt;
    &lt;/linearGradient&gt;
    &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
    &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
  &lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<h3 id="Spiegazione" name="Spiegazione">Spiegazione</h3>
<p>Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento &lt;svg&gt;. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.</p>