diff options
Diffstat (limited to 'files/pl/web/svg/tutorial')
| -rw-r--r-- | files/pl/web/svg/tutorial/index.html | 29 | ||||
| -rw-r--r-- | files/pl/web/svg/tutorial/svg_and_css/index.html | 196 | ||||
| -rw-r--r-- | files/pl/web/svg/tutorial/svg_in_html_introduction/index.html | 79 |
3 files changed, 304 insertions, 0 deletions
diff --git a/files/pl/web/svg/tutorial/index.html b/files/pl/web/svg/tutorial/index.html new file mode 100644 index 0000000000..e95141e71d --- /dev/null +++ b/files/pl/web/svg/tutorial/index.html @@ -0,0 +1,29 @@ +--- +title: SVG Poradnik +slug: Web/SVG/Tutorial +tags: + - SVG + - SVG:Przewodnik + - Wszystkie_kategorie +translation_of: Web/SVG/Tutorial +original_slug: Web/SVG/Przewodnik +--- +<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/tutorial/svg_and_css/index.html b/files/pl/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..a918e69cc0 --- /dev/null +++ b/files/pl/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,196 @@ +--- +title: Grafika SVG +slug: Web/SVG/Tutorial/SVG_and_CSS +tags: + - CSS:Na_początek +translation_of: Web/SVG/Tutorial/SVG_and_CSS +original_slug: Web/CSS/Na_początek/Grafika_SVG +--- +<p> +</p><p>Ta strona ilustruje specjalny język do tworzenia grafiki: SVG. +</p><p>Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG. </p> +<h3 id="Informacja:_SVG" name="Informacja:_SVG"> Informacja: SVG </h3> +<p><i>SVG</i> (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki. +</p><p>Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika. +</p><p>Podobnie jak inne bazujące na XML-u języki, SVG obsługuje arkusze stylów CSS, dzięki czemu możesz oddzielić styl grafiki od jej zawartości. +</p><p>Ponadto, arkusz stylów, którego używasz w innych językach znaczników dokumentu, może wskazywać adres grafiki SVG tam, gdzie potrzebny jest obrazek. +Na przykład, arkusz stylów, którego używasz w dokumencie HTML może wskazywać na adres URL grafiki SVG jako wartość własności <code>background</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG. +<p>Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez <a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>. +</p><p>Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę <a href="pl/SVG">SVG</a> w tym wiki. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_SVG" name="Zadanie:_Demonstracja_SVG"> Zadanie: Demonstracja SVG </h3> +<p>Stwórz nowy dokument SVG jako czysty plik tekstowy, <code>doc8.svg</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style8.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre></div> +<p>Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką. +</p><p>To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji. +Grafika wygląda mniej więcej tak: +</p> +<table style="border: 2px outset #36b;"> +<tbody><tr> +<td><img alt="Demonstracja SVG"> +</td></tr></tbody></table> +<p>Uwagi dotyczące tej demonstracji: +</p> +<ul><li>Dokument SVG posiada odnośniki do arkusza stylów. +</li><li>SVG posiada własne własności i wartości CSS. Niektóre z nich są podobne do własności CSS dla HTML-a. +</li></ul> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień ten arkusz stylów, aby wewnętrzne płatki zmieniały się wszystkie na różowy, kiedy wskaźnik myszy znajduje się nad jednym z nich, bez zmiany działania zewnętrznych płatków. +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji Twoja przeglądarka, obsługująca SVG, umie już wyświetlić elementy SVG. +Arkusz stylów modyfikuje tylko sposób wyświetlania elementów. +Tak samo dzieje się z dokumentami HTML i XUL. +Możesz też używać CSS-a w dokumentach XML ogólnego przeznaczenia, gdzie nie istnieje domyślny sposób wyświetlania elementów. +Następna strona omawia ten temat: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/SVG_graphics", "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pt": "pt/CSS/Como_come\u00e7ar/Gr\u00e1ficos_SVG" } ) }} diff --git a/files/pl/web/svg/tutorial/svg_in_html_introduction/index.html b/files/pl/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..0c74009689 --- /dev/null +++ b/files/pl/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,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><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" } ) }} |