diff options
Diffstat (limited to 'files/pl/web/svg/przewodnik')
| -rw-r--r-- | files/pl/web/svg/przewodnik/index.html | 28 | ||||
| -rw-r--r-- | files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html | 78 |
2 files changed, 106 insertions, 0 deletions
diff --git a/files/pl/web/svg/przewodnik/index.html b/files/pl/web/svg/przewodnik/index.html new file mode 100644 index 0000000000..7f150c7110 --- /dev/null +++ b/files/pl/web/svg/przewodnik/index.html @@ -0,0 +1,28 @@ +--- +title: SVG Poradnik +slug: Web/SVG/Przewodnik +tags: + - SVG + - 'SVG:Przewodnik' + - Wszystkie_kategorie +translation_of: Web/SVG/Tutorial +--- +<p> </p> + +<p><br> + Poniższy przewodnik opisuje wersję 1.1 Skalowalnej Grafiki Wektorowej <a href="pl/SVG">SVG</a>, a dialektu XML W3C częściowo zaimplementowanego w Firefoksie 1.5, Operze 8.5 oraz innych przeglądarkach.</p> + +<p>Jest on na <strong>bardzo</strong> wczesnym etapie rozwoju. Każda pomoc będzie doceniona!</p> + +<h5 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h5> + +<ul> + <li><a href="https://developer.mozilla.org/pl/docs/Web/SVG/Przewodnik/Introduction">Wprowadzenie</a></li> + <li><a href="pl/SVG/Przewodnik/Na_pocz%c4%85tek">Na początek</a></li> + <li>Wiele innych wpisów</li> + <li><a href="pl/SVG/Przewodnik/Inne_przewodniki">Inne przewodniki</a></li> +</ul> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial" } ) }}</p> diff --git a/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html new file mode 100644 index 0000000000..f816909090 --- /dev/null +++ b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html @@ -0,0 +1,78 @@ +--- +title: SVG w XHTML - Wprowadzenie +slug: Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie +tags: + - SVG + - Wszystkie_kategorie +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<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><html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>XTech SVG Demo</title> + <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; } + </style> + <script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } + </script> +</head> +<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</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><button onclick="signalError();">Activate!</button></p> + </fieldset> + </form> + <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;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> + </svg> +</body> +</html></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 <svg>. 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 <body>, 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" } ) }} |