files/pl/web/svg/tutorial/svg_in_html_introduction/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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

---
title: SVG w XHTML - Wprowadzenie
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
tags:
  - SVG
  - Wszystkie_kategorie
translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
original_slug: Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie
---
<p>
</p>
<h3 id="Podsumowanie"> Podsumowanie </h3>
<p>Ten artykuł oraz powiązany z nim przykład pokazują, jak używać <a href="pl/SVG">SVG</a> osadzonego w <a href="pl/XHTML">XHTML</a>, jako tła dla formularza. Pokazuje ponadto, jak <a href="pl/JavaScript">JavaScript</a> i <a href="pl/CSS">CSS</a> mogą być zastosowane do manipulowania obrazem w analogiczny sposób, jak kodem XHTML. Uwaga: poniższy przykład będzie działał wyłącznie w przeglądarkach obsługujących integrację XHTML (nie HTML) z SVG (jak np. Firefox 1.5 Beta 1 - <i>przyp. tłum.</i>)
</p>
<h3 id="Kod_.C5.BAr.C3.B3d.C5.82owy"> Kod źródłowy </h3>
<p>Poniżej przedstawiono kod źródłowy <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">przykładu zastosowania</a> SVG osadzonego w XHTML:
</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="Om.C3.B3wienie"> Omówienie </h3>
<p>Powyższa strona składa się głównie ze zwykłego XHTML, CSS i JavaScriptu. Interesującą częścią
jest element &lt;svg&gt;. Ten element i jego elementy potomne zostały zadeklarowane w przestrzeni nazw SVG. Element ten zawiera gradient oraz dwie figury nim wypełnione. Kolory ograniczników (ang. <i>stops</i>) gradientu zostały ustawione przez CSS. Kiedy użytkownik wprowadzi coś nieprawidłowego do pola formularza, skrypt ustawia atrybut "<code>invalid</code>" na elemencie &lt;body&gt;, a odpowiednia regułka CSS zmienia końcowy kolor na czerwony. Kolejna regułka CSS wyświetla komunikat o błędzie.
</p><p>To podejście ma następujące zalety:
</p>
<ul><li> zastosowaliśmy zwykły formularz XHTML, który mógłby być częścią istniejącej strony www i dodaliśmy atrakcyjne, interaktywne tło
</li><li> zachowana została wsteczna kompatybilność z przeglądarkami, które nie obsługują SVG; po prostu nie pojawi się w nich żadne tło
</li><li> rozwiązanie to jest proste i wydajne
</li><li> obraz dynamicznie dopasowuje się do żądanych rozmiarów w inteligentny sposób
</li><li> możemy mieć deklaratywne regułki stylów działające i z HTML, i z SVG
</li><li> ten sam skrypt manipuluje zarówno XHTML jak i SVG
</li><li> dokument jest całkowicie oparty na standardach
</li></ul>
<h3 id="Szczeg.C3.B3.C5.82y"> Szczegóły </h3>
<p>Atrybut <code>viewBox</code> tworzy logiczny układ współrzędnych dla obrazu SVG. W tym przypadku nasz obraz jest wyświetlany w oknie (<i>viewport</i>) 100 na 100.
</p><p>Atrybut <code>preserveAspectRatio</code> sprawia, że stosunek wymiarów obrazu musi być zachowany, centrując obraz, zmieniając jego wymiary do największej możliwej długości lub szerokości (zależnie od tego, która jest większa) i odcinając ewentualne przepełnienie.
</p><p>Atrybut <code>style</code> przypina element SVG do tła formularza.
</p>
<h3 id="Inne_strony"> Inne strony </h3>
<ul><li> Inny przykład SVG w XHTML: <a class="external" href="http://developer.mozilla.org/en/docs/index.php?title=SVG:Namespaces_Crash_Course:Example">Rój pyłków (en)</a>
</li><li> Strona <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> na wiki SVG
</li></ul>
{{ languages( { "en": "en/SVG_In_HTML_Introduction", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }}