From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- files/pl/web/svg/tutorial/index.html | 28 +++ files/pl/web/svg/tutorial/svg_and_css/index.html | 195 +++++++++++++++++++++ .../tutorial/svg_in_html_introduction/index.html | 78 +++++++++ 3 files changed, 301 insertions(+) create mode 100644 files/pl/web/svg/tutorial/index.html create mode 100644 files/pl/web/svg/tutorial/svg_and_css/index.html create mode 100644 files/pl/web/svg/tutorial/svg_in_html_introduction/index.html (limited to 'files/pl/web/svg/tutorial') diff --git a/files/pl/web/svg/tutorial/index.html b/files/pl/web/svg/tutorial/index.html new file mode 100644 index 0000000000..7f150c7110 --- /dev/null +++ b/files/pl/web/svg/tutorial/index.html @@ -0,0 +1,28 @@ +--- +title: SVG Poradnik +slug: Web/SVG/Przewodnik +tags: + - SVG + - 'SVG:Przewodnik' + - Wszystkie_kategorie +translation_of: Web/SVG/Tutorial +--- +

 

+ +


+ Poniższy przewodnik opisuje wersję 1.1 Skalowalnej Grafiki Wektorowej SVG, a dialektu XML W3C częściowo zaimplementowanego w Firefoksie 1.5, Operze 8.5 oraz innych przeglądarkach.

+ +

Jest on na bardzo wczesnym etapie rozwoju. Każda pomoc będzie doceniona!

+ +
Wprowadzenie
+ + + +
 
+ +

{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial" } ) }}

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..1581fbdcd8 --- /dev/null +++ b/files/pl/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,195 @@ +--- +title: Grafika SVG +slug: Web/CSS/Na_początek/Grafika_SVG +tags: + - 'CSS:Na_początek' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +

+

Ta strona ilustruje specjalny język do tworzenia grafiki: SVG. +

Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG.

+

Informacja: SVG

+

SVG (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki. +

Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika. +

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. +

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 background. +

+ + +
Więcej szczegółów +
W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG. +

Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez Adobe. +

Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę SVG w tym wiki. +

+
+

Zadanie: Demonstracja SVG

+

Stwórz nowy dokument SVG jako czysty plik tekstowy, doc8.svg. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<?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>
+
+

Stwórz nowy plik CSS, style8.css. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
/*** 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;
+  }
+
+

Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką. +

To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji. +Grafika wygląda mniej więcej tak: +

+ + +
Demonstracja SVG +
+

Uwagi dotyczące tej demonstracji: +

+ +


+

+ + +
Wyzwanie +
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. +
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. +

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: +Dane XML +

{{ 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..f816909090 --- /dev/null +++ b/files/pl/web/svg/tutorial/svg_in_html_introduction/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 +--- +

+

+

Podsumowanie

+

Ten artykuł oraz powiązany z nim przykład pokazują, jak używać SVG osadzonego w XHTML, jako tła dla formularza. Pokazuje ponadto, jak JavaScript i CSS 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 - przyp. tłum.) +

+

Kod źródłowy

+

Poniżej przedstawiono kod źródłowy przykładu zastosowania SVG osadzonego w XHTML: +

+
<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>
+

Omówienie

+

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. stops) gradientu zostały ustawione przez CSS. Kiedy użytkownik wprowadzi coś nieprawidłowego do pola formularza, skrypt ustawia atrybut "invalid" na elemencie <body>, a odpowiednia regułka CSS zmienia końcowy kolor na czerwony. Kolejna regułka CSS wyświetla komunikat o błędzie. +

To podejście ma następujące zalety: +

+ +

Szczegóły

+

Atrybut viewBox tworzy logiczny układ współrzędnych dla obrazu SVG. W tym przypadku nasz obraz jest wyświetlany w oknie (viewport) 100 na 100. +

Atrybut preserveAspectRatio 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. +

Atrybut style przypina element SVG do tła formularza. +

+

Inne strony

+ +{{ languages( { "en": "en/SVG_In_HTML_Introduction", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }} -- cgit v1.2.3-54-g00ecf