From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/web/svg/element/a/index.html | 149 ++++++++++++ .../pl/web/svg/element/animatetransform/index.html | 95 ++++++++ files/pl/web/svg/element/index.html | 252 +++++++++++++++++++++ "files/pl/web/svg/element/okr\304\205g/index.html" | 99 ++++++++ files/pl/web/svg/index.html | 100 ++++++++ files/pl/web/svg/inne_zasoby/index.html | 19 ++ files/pl/web/svg/przewodnik/index.html | 28 +++ .../svg_w_xhtml_-_wprowadzenie/index.html | 78 +++++++ 8 files changed, 820 insertions(+) create mode 100644 files/pl/web/svg/element/a/index.html create mode 100644 files/pl/web/svg/element/animatetransform/index.html create mode 100644 files/pl/web/svg/element/index.html create mode 100644 "files/pl/web/svg/element/okr\304\205g/index.html" create mode 100644 files/pl/web/svg/index.html create mode 100644 files/pl/web/svg/inne_zasoby/index.html create mode 100644 files/pl/web/svg/przewodnik/index.html create mode 100644 files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html (limited to 'files/pl/web/svg') diff --git a/files/pl/web/svg/element/a/index.html b/files/pl/web/svg/element/a/index.html new file mode 100644 index 0000000000..0bef2fd2ac --- /dev/null +++ b/files/pl/web/svg/element/a/index.html @@ -0,0 +1,149 @@ +--- +title: +slug: Web/SVG/Element/a +tags: + - Element SVG + - SVG + - SVG link +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

Element <a> SVG określa hiperłącze.

+ +

Element <a> HTML jest interpretowany tak samo jak element <a> SVG. Z tego względu w przypadku użycia selektora <a> w CSS lub JavaScript może mieć zastosowanie do nieprawidłowego elementu. Wypróbuj regułę @namespace, aby rozróżnić między nimi.

+ +

Użycie

+ +

{{svginfo}}

+ +

Atrybuty

+ +

Atrybuty globalne

+ + + +

Atrybuty specyficzne

+ +
+

No browser supports all XLink attributes.

+
+ + + +

DOM model

+ +

Element implementuje {{domxref("SVGAElement")}}.

+ +

Przykład

+ +

SVG

+ +
<svg width="140" height="30" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG"
+      target="_blank">
+    <rect height="30" width="120" y="0" x="0" rx="15"/>
+    <text fill="white" text-anchor="middle"
+          y="21" x="60">SVG on MDN</text>
+  </a>
+</svg>
+ +

Rezultat

+ +

{{EmbedLiveSample("Example", 170, 60)}}

+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Wsparcie przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)IEOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('9.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatAndroid('3.0')}}{{CompatVersionUnknown}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
diff --git a/files/pl/web/svg/element/animatetransform/index.html b/files/pl/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..e54fffd073 --- /dev/null +++ b/files/pl/web/svg/element/animatetransform/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/SVG/Element/animateTransform +tags: + - Animacja + - Animacje SVG + - SVG Animacja +translation_of: Web/SVG/Element/animateTransform +--- +
{{SVGRef}}
+ +

Element animateTransform służy do transformacji właściwości elementu takich jak skalowanie, obracanie, przechylanie.

+ +

Użycie

+ +

{{svginfo}}

+ +

Przykład

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+    <polygon points="60,30 90,90 30,90">
+        <animateTransform attributeName="transform"
+                          attributeType="XML"
+                          type="rotate"
+                          from="0 60 70"
+                          to="360 60 70"
+                          dur="10s"
+                          repeatCount="indefinite"/>
+    </polygon>
+</svg>
+ +

Podgląd na żywo

+ +

{{ EmbedLiveSample('Example','120','120') }}

+ +

Atrybuty

+ +

Atrybuty globalne

+ + + +

Atrybuty specyficzne

+ + + +

Model DOM

+ +

Element implementuje SVGAnimateTransformElement.

+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}{{Spec2("SVG Animations 2")}}No change
{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Wsparcie przeglądarek

+ +

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

diff --git a/files/pl/web/svg/element/index.html b/files/pl/web/svg/element/index.html new file mode 100644 index 0000000000..297ac09a16 --- /dev/null +++ b/files/pl/web/svg/element/index.html @@ -0,0 +1,252 @@ +--- +title: SVG element reference +slug: Web/SVG/Element +tags: + - NeedsTranslation + - SVG + - SVG Reference + - TopicStub + - 'l10n:priority' +translation_of: Web/SVG/Element +--- +

« SVG / SVG Attribute reference »

+ +

SVG elements

+ +
A + +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
  • {{SVGElement("altGlyphDef")}}
    • +
  • {{SVGElement("altGlyphItem")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
  • {{HTMLElement("audio")}}
    • +
+B C + +
    +
  • {{HTMLElement("canvas")}}
    • +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
  • {{SVGElement("cursor")}}
    • +
+D + +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
  • {{SVGElement("discard")}}
    • +
+E + +
    +
  • {{SVGElement("ellipse")}}
    • +
+F + +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feDropShadow")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("font")}}
    • +
  • {{SVGElement("font-face")}}
    • +
  • {{SVGElement("font-face-format")}}
    • +
  • {{SVGElement("font-face-name")}}
    • +
  • {{SVGElement("font-face-src")}}
    • +
  • {{SVGElement("font-face-uri")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+G + +
    +
  • {{SVGElement("g")}}
    • +
  • {{SVGElement("glyph")}}
    • +
  • {{SVGElement("glyphRef")}}
    • +
+H + +
    +
  • {{SVGElement("hatch")}}
    • +
  • {{SVGElement("hatchpath")}}
    • +
  • {{SVGElement("hkern")}}
    • +
+I + +
    +
  • {{HTMLElement("iframe")}}
    • +
  • {{SVGElement("image")}}
    • +
+J K L + +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+M + +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("mesh")}}
    • +
  • {{SVGElement("meshgradient")}}
    • +
  • {{SVGElement("meshpatch")}}
    • +
  • {{SVGElement("meshrow")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("missing-glyph")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+N O P + +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+Q R + +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+S + +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("solidcolor")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+T + +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+U + +
    +
  • {{SVGElement("unknown")}}
    • +
  • {{SVGElement("use")}}
    • +
+V — Z + +
    +
  • {{HTMLElement("video")}}
    • +
  • {{SVGElement("view")}}
    • +
  • {{SVGElement("vkern")}}
    • +
+
+ +

Categories

+ +

Animation elements

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

Basic shapes

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Container elements

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

Descriptive elements

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

Filter primitive elements

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

Font elements

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

Gradient elements

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

Graphics elements

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+ +

Graphics referencing elements

+ +

{{HTMLElement("audio")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("mesh")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}

+ +

HTML elements

+ +

{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("video")}}

+ +

Light source elements

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+ +

Never-rendered elements

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}

+ +

Paint server elements

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}

+ +

Renderable elements

+ +

{{SVGElement("a")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}

+ +

Shape elements

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Structural elements

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

Text content elements

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Text content child elements

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Uncategorized elements

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

diff --git "a/files/pl/web/svg/element/okr\304\205g/index.html" "b/files/pl/web/svg/element/okr\304\205g/index.html" new file mode 100644 index 0000000000..6ef2bca50e --- /dev/null +++ "b/files/pl/web/svg/element/okr\304\205g/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ż

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

 

+ +
Na początek
+Kurs mający pomóc w rozpoczęciu nauki SVG.
+ +
+

Skalowalna Grafika Wektorowa (SVG) jest językiem na bazie XML-a służącym do opisu dwuwymiarowej grafiki wektorowej. Ogólnie SVG jest tym dla grafiki czym XHTML dla tekstu.

+ +

SVG jest podobny w zakresie do technologi Macromedia Flash. Jednakże tym co odróżnia SVG od Flasha jest rekomendacja W3C (tj. standard dotyczący zamiarów i celów) oraz to, że oparty jest on na XML-u, a nie na zamkniętym formacie binarnym. SVG jest również specjalnie zaprojektowany do współpracy z innymi standardami W3C jak CSS, DOM czy SMIL.

+
+ +

 

+ + + + + + + + +
+

Dokumentacja

+ +
+
SVG w Firefoksie
+
Artykuł opisuje podzbiór i zachowanie specyfikacji SVG 1.1 aktualnie zaimplementowanej w Firefoksie 2.
+
+ +
+
Wprowadzenie do użycia SVG w HTML-u
+
Ten artykuł oraz powiązany przykład pokazują jak używać SVG w kodzie, aby dodać obrazek tła do formularza. Pokazuje jak można użyć JavaScriptu i CSS-a do manipulowania obrazkami, w taki sam sposób w jaki czynią to z HTML-em.
+
+ +
+
SVG - Podręcznik autorski
+
Omawiane są tutaj najczęstsze błędy w SVG oraz wyjaśnia co programiści czynią, by je naprawić.
+
+ +
+
Projekt Mozilla SVG
+
Przegląd projektu Mozilla SVG.
+
+ +
+
Mozilla SVG FAQ
+
Powyższy FAQ oparty został początkowo na grupie dyskusyjnej mozilla.dev.tech.svg oraz forach forums.mozillazine.org.
+
+ +

Pokaż wszystkie...

+ 		+

Społeczność

+ +
    +
  • Obejrzyj fora Mozilli...
    • +
+ +

{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}

+ + + +

Narzędzia

+ + + +

Pokaż wszystkie...

+ +

Przykłady

+ + + +

Powiązane tematy

+ +
+
XML, Canvas
+
+
+ +

Categories

+ +

Interwiki Language Links

+ +

 

+ +

{{ languages( { "en": "en/SVG", "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pt": "pt/SVG" } ) }}

diff --git a/files/pl/web/svg/inne_zasoby/index.html b/files/pl/web/svg/inne_zasoby/index.html new file mode 100644 index 0000000000..6e5f2508b8 --- /dev/null +++ b/files/pl/web/svg/inne_zasoby/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 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 +--- +

 

+ +


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

+

+

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