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/element/circle/index.html | 99 +++++++++++ "files/pl/web/svg/element/okr\304\205g/index.html" | 99 ----------- files/pl/web/svg/inne_zasoby/index.html | 19 -- files/pl/web/svg/other_resources/index.html | 19 ++ files/pl/web/svg/przewodnik/index.html | 28 --- .../svg_w_xhtml_-_wprowadzenie/index.html | 78 --------- 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 +++++++++ 9 files changed, 419 insertions(+), 224 deletions(-) create mode 100644 files/pl/web/svg/element/circle/index.html delete mode 100644 "files/pl/web/svg/element/okr\304\205g/index.html" delete mode 100644 files/pl/web/svg/inne_zasoby/index.html create mode 100644 files/pl/web/svg/other_resources/index.html delete mode 100644 files/pl/web/svg/przewodnik/index.html delete mode 100644 files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html 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') diff --git a/files/pl/web/svg/element/circle/index.html b/files/pl/web/svg/element/circle/index.html new file mode 100644 index 0000000000..6ef2bca50e --- /dev/null +++ b/files/pl/web/svg/element/circle/index.html @@ -0,0 +1,99 @@ +--- +title: +slug: Web/SVG/Element/okrąg +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

Element SVG jest podstawowym kształtem SVG, używanym do tworzenia okręgów w oparciu o punkt środkowy i promień.<circle>

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="50" />
+</svg>
+ +

{{EmbedLiveSample ("Przykład", 100, 100)}}

+
+ +

Atrybuty

+ +
+
{{SVGAttr ("cx")}}
+
Ten atrybut definiuje współrzędną osi X środka elementu.
+ Typ wartości : <długość> | <procent> ; Wartość domyślna : 0; Animowalny : tak
+
{{SVGAttr ("cy")}}
+
Ten atrybut definiuje współrzędną osi y środka środka elementu.
+ Typ wartości :  <długość> | <procent> ; Wartość domyślna : 0; Animowalny : tak
+
{{SVGAttr ("r")}}
+
Ten atrybut definiuje promień elementu.
+ Wartość mniejsza lub równa zero powoduje wyłączenie renderowania okręgu.
+ Typ wartości : <length> ; Wartość domyślna : 0; Animowalny : tak
+
{{SVGAttr ("ścieżkaLength")}}
+
Ten atrybut pozwala określić całkowitą długość ścieżki w jednostkach użytkownika.
+ Typ wartości : <liczba> ; Wartość domyślna : brak ; Animowalny : tak
+
+ +
+

Uwaga: Począwszy od SVG2 i Geometria Propertie s, czyli te atrybuty mogą być również używane jako właściwości CSS dla tego elementu.SVG2 cx, cyand r are

+
+ +

Globalne atrybuty

+ +
+
Główne atrybuty
+
Przede wszystkim: {{SVGAttr ('id')}}, {{SVGAttr ('tabindex')}}
+
Atrybuty stylizacji
+
{{SVGAttr ('class')}}, {{SVGAttr ('style')}}
+
Atrybuty warunkowego przetwarzania
+
Przede wszystkim: {{SVGAttr ('requiredExtensions')}}, {{SVGAttr ("systemLanguage")}}
+
Atrybuty zdarzeń
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "shapes.html#CircleElement", "<circle>")}}{{Spec2 ("SVG2")}} 
{{SpecName ("SVG1.1", "shapes.html # CircleElement", "<circle>")}}{{Spec2 ("SVG1.1")}}Początkowa definicja
+ +

Zgodność przeglądarki

+ + + +

{{Compat ("svg.elements.circle")}}

+ +

Zobacz też

+ + diff --git "a/files/pl/web/svg/element/okr\304\205g/index.html" "b/files/pl/web/svg/element/okr\304\205g/index.html" deleted file mode 100644 index 6ef2bca50e..0000000000 --- "a/files/pl/web/svg/element/okr\304\205g/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: -slug: Web/SVG/Element/okrąg -translation_of: Web/SVG/Element/circle ---- -
{{SVGRef}}
- -

Element SVG jest podstawowym kształtem SVG, używanym do tworzenia okręgów w oparciu o punkt środkowy i promień.<circle>

- -
- - -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="50" />
-</svg>
- -

{{EmbedLiveSample ("Przykład", 100, 100)}}

-
- -

Atrybuty

- -
-
{{SVGAttr ("cx")}}
-
Ten atrybut definiuje współrzędną osi X środka elementu.
- Typ wartości : <długość> | <procent> ; Wartość domyślna : 0; Animowalny : tak
-
{{SVGAttr ("cy")}}
-
Ten atrybut definiuje współrzędną osi y środka środka elementu.
- Typ wartości :  <długość> | <procent> ; Wartość domyślna : 0; Animowalny : tak
-
{{SVGAttr ("r")}}
-
Ten atrybut definiuje promień elementu.
- Wartość mniejsza lub równa zero powoduje wyłączenie renderowania okręgu.
- Typ wartości : <length> ; Wartość domyślna : 0; Animowalny : tak
-
{{SVGAttr ("ścieżkaLength")}}
-
Ten atrybut pozwala określić całkowitą długość ścieżki w jednostkach użytkownika.
- Typ wartości : <liczba> ; Wartość domyślna : brak ; Animowalny : tak
-
- -
-

Uwaga: Począwszy od SVG2 i Geometria Propertie s, czyli te atrybuty mogą być również używane jako właściwości CSS dla tego elementu.SVG2 cx, cyand r are

-
- -

Globalne atrybuty

- -
-
Główne atrybuty
-
Przede wszystkim: {{SVGAttr ('id')}}, {{SVGAttr ('tabindex')}}
-
Atrybuty stylizacji
-
{{SVGAttr ('class')}}, {{SVGAttr ('style')}}
-
Atrybuty warunkowego przetwarzania
-
Przede wszystkim: {{SVGAttr ('requiredExtensions')}}, {{SVGAttr ("systemLanguage")}}
-
Atrybuty zdarzeń
-
Global event attributes, Graphical event attributes
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA Attributes
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Usage notes

- -

{{svginfo}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("SVG2", "shapes.html#CircleElement", "<circle>")}}{{Spec2 ("SVG2")}} 
{{SpecName ("SVG1.1", "shapes.html # CircleElement", "<circle>")}}{{Spec2 ("SVG1.1")}}Początkowa definicja
- -

Zgodność przeglądarki

- - - -

{{Compat ("svg.elements.circle")}}

- -

Zobacz też

- -
    -
  • Inne podstawowe kształty SVG: {{SVGElement ('ellipse')}} , {{SVGElement ('line')}}, {{SVGElement ('polygon')}}, {{SVGElement ('polyline')}}, { {SVGElement ("rect")}}
    • -
diff --git a/files/pl/web/svg/inne_zasoby/index.html b/files/pl/web/svg/inne_zasoby/index.html deleted file mode 100644 index 6e5f2508b8..0000000000 --- a/files/pl/web/svg/inne_zasoby/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Inne zasoby -slug: Web/SVG/Inne_zasoby -tags: - - SVG - - Wszystkie_kategorie -translation_of: Web/SVG/Other_Resources ---- -

-

-

Wszystkie inne zasoby

- -{{ languages( { "en": "en/SVG/Other_Resources", "ja": "ja/SVG/Other_Resources" } ) }} diff --git a/files/pl/web/svg/other_resources/index.html b/files/pl/web/svg/other_resources/index.html new file mode 100644 index 0000000000..6e5f2508b8 --- /dev/null +++ b/files/pl/web/svg/other_resources/index.html @@ -0,0 +1,19 @@ +--- +title: Inne zasoby +slug: Web/SVG/Inne_zasoby +tags: + - SVG + - Wszystkie_kategorie +translation_of: Web/SVG/Other_Resources +--- +

+

+

Wszystkie inne zasoby

+ +{{ languages( { "en": "en/SVG/Other_Resources", "ja": "ja/SVG/Other_Resources" } ) }} diff --git a/files/pl/web/svg/przewodnik/index.html b/files/pl/web/svg/przewodnik/index.html deleted file mode 100644 index 7f150c7110..0000000000 --- a/files/pl/web/svg/przewodnik/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html b/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html deleted file mode 100644 index f816909090..0000000000 --- a/files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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: -

-
  • 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 -
  • zachowana została wsteczna kompatybilność z przeglądarkami, które nie obsługują SVG; po prostu nie pojawi się w nich żadne tło -
  • rozwiązanie to jest proste i wydajne -
  • obraz dynamicznie dopasowuje się do żądanych rozmiarów w inteligentny sposób -
  • możemy mieć deklaratywne regułki stylów działające i z HTML, i z SVG -
  • ten sam skrypt manipuluje zarówno XHTML jak i SVG -
  • dokument jest całkowicie oparty na standardach -
-

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" } ) }} 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: +

+
  • Dokument SVG posiada odnośniki do arkusza stylów. +
  • 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. +
+


+

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

+
  • 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 +
  • zachowana została wsteczna kompatybilność z przeglądarkami, które nie obsługują SVG; po prostu nie pojawi się w nich żadne tło +
  • rozwiązanie to jest proste i wydajne +
  • obraz dynamicznie dopasowuje się do żądanych rozmiarów w inteligentny sposób +
  • możemy mieć deklaratywne regułki stylów działające i z HTML, i z SVG +
  • ten sam skrypt manipuluje zarówno XHTML jak i SVG +
  • dokument jest całkowicie oparty na standardach +
+

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