diff options
Diffstat (limited to 'files/pl/web/svg')
| -rw-r--r-- | files/pl/web/svg/element/a/index.html | 149 | ||||
| -rw-r--r-- | files/pl/web/svg/element/animatetransform/index.html | 95 | ||||
| -rw-r--r-- | files/pl/web/svg/element/index.html | 252 | ||||
| -rw-r--r-- | files/pl/web/svg/element/okrąg/index.html | 99 | ||||
| -rw-r--r-- | files/pl/web/svg/index.html | 100 | ||||
| -rw-r--r-- | files/pl/web/svg/inne_zasoby/index.html | 19 | ||||
| -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 |
8 files changed, 820 insertions, 0 deletions
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: <a> +slug: Web/SVG/Element/a +tags: + - Element SVG + - SVG + - SVG link +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Element <strong><code><a></code></strong> SVG określa hiperłącze.</span></p> + +<p>Element<a href="/en-US/docs/Web/HTML/Element/a"> <a> </a><a href="/en-US/docs/Web/HTML/Element/a">HTML </a>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.</p> + +<h2 id="Użycie">Użycie</h2> + +<p>{{svginfo}}</p> + +<h2 id="Atrybuty">Atrybuty</h2> + +<h3 id="Atrybuty_globalne">Atrybuty globalne</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Xlink attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Atrybuty_specyficzne">Atrybuty specyficzne</h3> + +<div class="note"> +<p>No browser supports all XLink attributes.</p> +</div> + +<ul> + <li>{{SVGAttr("href")}}</li> + <li>{{SVGAttr("target")}}</li> + <li>{{SVGAttr("xlink:show")}}</li> + <li>{{SVGAttr("xlink:actuate")}}</li> + <li>{{SVGAttr("xlink:href")}} {{deprecated_inline}}</li> +</ul> + +<h2 id="DOM_model">DOM model</h2> + +<p>Element implementuje {{domxref("SVGAElement")}}.</p> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><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></pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample("Example", 170, 60)}}</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> 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: <animateTransform> +slug: Web/SVG/Element/animateTransform +tags: + - Animacja + - Animacje SVG + - SVG Animacja +translation_of: Web/SVG/Element/animateTransform +--- +<div>{{SVGRef}}</div> + +<p>Element animateTransform służy do transformacji właściwości elementu takich jak skalowanie, obracanie, przechylanie.</p> + +<h2 id="Użycie">Użycie</h2> + +<p>{{svginfo}}</p> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: html"><?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></pre> + +<p><strong>Podgląd na żywo</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="Atrybuty">Atrybuty</h2> + +<h3 id="Atrybuty_globalne">Atrybuty globalne</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional processing attributes" title="en-US/docs/Web/SVG/Attribute#Conditional processing attributes">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core attributes" title="en-US/docs/Web/SVG/Attribute#Core attributes">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation event attributes" title="en-US/docs/Web/SVG/Attribute#Animation event attributes">Animation event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink attributes" title="en-US/docs/Web/SVG/Attribute#Xlink attributes">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation attribute target attributes" title="en-US/docs/Web/SVG/Attribute#Animation attribute target attributes">Animation attribute target attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation timing attributes" title="en-US/docs/Web/SVG/Attribute#Animation timing attributes">Animation timing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation value attributes" title="en-US/docs/Web/SVG/Attribute#Animation value attributes">Animation value attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation addition attributes" title="en-US/docs/Web/SVG/Attribute#Animation addition attributes">Animation addition attributes</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atrybuty_specyficzne">Atrybuty specyficzne</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h2 id="Model_DOM">Model DOM</h2> + +<p>Element implementuje <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<p>{{Compat("svg.elements.animateTransform")}}</p> 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 +--- +<p>« <a href="/en-US/docs/SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute">SVG Attribute reference</a> »</p> + +<h2 id="SVG_elements">SVG elements</h2> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> + <li>{{HTMLElement("audio")}}</li> +</ul> +<span id="C">B C</span> + +<ul> + <li>{{HTMLElement("canvas")}}</li> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> +<span id="D">D</span> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feDropShadow")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> +<span id="G">G</span> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> +<span id="H">H</span> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> + <li>{{SVGElement("hkern")}}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li>{{SVGElement("image")}}</li> +</ul> +<span id="L">J K L</span> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> +<span id="P">N O P</span> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> +<span id="R">Q R</span> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> +<span id="V">V — Z</span> + +<ul> + <li>{{HTMLElement("video")}}</li> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_elements">Animation elements</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Basic_shapes">Basic shapes</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Container_elements">Container elements</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Descriptive_elements">Descriptive elements</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Filter_primitive_elements">Filter primitive elements</h3> + +<p>{{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")}}</p> + +<h3 id="Font_elements">Font elements</h3> + +<p>{{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")}}</p> + +<h3 id="Gradient_elements">Gradient elements</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Graphics_elements">Graphics elements</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="Graphics_referencing_elements">Graphics referencing elements</h3> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("iframe")}}, {{SVGElement("image")}}, {{SVGElement("mesh")}}, {{SVGElement("use")}}, {{HTMLElement("video")}}</p> + +<h3 id="HTML_elements">HTML elements</h3> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("video")}}</p> + +<h3 id="Light_source_elements">Light source elements</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Never-rendered_elements">Never-rendered elements</h3> + +<p>{{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")}}</p> + +<h3 id="Paint_server_elements">Paint server elements</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> + +<h3 id="Renderable_elements">Renderable elements</h3> + +<p>{{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")}}</p> + +<h3 id="Shape_elements">Shape elements</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Structural_elements">Structural elements</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Text_content_elements">Text content elements</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Text_content_child_elements">Text content child elements</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Uncategorized_elements">Uncategorized elements</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> diff --git a/files/pl/web/svg/element/okrąg/index.html b/files/pl/web/svg/element/okrąg/index.html new file mode 100644 index 0000000000..6ef2bca50e --- /dev/null +++ b/files/pl/web/svg/element/okrąg/index.html @@ -0,0 +1,99 @@ +--- +title: <circle> +slug: Web/SVG/Element/okrąg +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p>Element <a href="/en-US/docs/Web/SVG">SVG</a> jest podstawowym kształtem SVG, używanym do tworzenia okręgów w oparciu o punkt środkowy i promień.<strong><code><circle></code></strong></p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html, body, svg {height: 100%}</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="50" cy="50" r="50" /> +</svg></pre> + +<p>{{EmbedLiveSample ("Przykład", 100, 100)}}</p> +</div> + +<h2 id="Atrybuty">Atrybuty</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr ("cx")}}</dt> + <dd>Ten atrybut definiuje współrzędną osi X środka elementu.<br> + <small><em>Typ wartości</em> : <strong><a href="/docs/Web/SVG/Content_type#Length"><długość></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><procent></a></strong> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd> + <dt id="attr-cy">{{SVGAttr ("cy")}}</dt> + <dd>Ten atrybut definiuje współrzędną osi y środka środka elementu.<br> + <small><em>Typ wartości</em> : <strong><a href="/docs/Web/SVG/Content_type#Length"><długość></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><procent></a></strong> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd> + <dt id="attr-r">{{SVGAttr ("r")}}</dt> + <dd>Ten atrybut definiuje promień elementu.<br> + Wartość mniejsza lub równa zero powoduje wyłączenie renderowania okręgu.<br> + <small><em>Typ wartości</em> : <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Wartość domyślna</em> : <code>0</code>; <em>Animowalny</em> : <strong>tak</strong></small></dd> + <dt>{{SVGAttr ("ścieżkaLength")}}</dt> + <dd>Ten atrybut pozwala określić całkowitą długość ścieżki w jednostkach użytkownika.<br> + <small><em>Typ wartości</em> : <a href="/docs/Web/SVG/Content_type#Number"><strong><liczba></strong></a> ; <em>Wartość domyślna</em> : <em>brak</em> ; <em>Animowalny</em> : <strong>tak</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Uwaga:</strong> Począwszy od SVG2 i <em>Geometria Propertie</em> s, czyli te atrybuty mogą być również używane jako właściwości CSS dla tego elementu.SVG2 <code>cx</code>, <code>cy</code>and <code>r</code> are</p> +</div> + +<h3 id="Globalne_atrybuty">Globalne atrybuty</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Główne atrybuty</a></dt> + <dd><small>Przede wszystkim: {{SVGAttr ('id')}}, {{SVGAttr ('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Atrybuty stylizacji</a></dt> + <dd><small>{{SVGAttr ('class')}}, {{SVGAttr ('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Atrybuty warunkowego przetwarzania</a></dt> + <dd><small>Przede wszystkim: {{SVGAttr ('requiredExtensions')}}, {{SVGAttr ("systemLanguage")}}</small></dd> + <dt>Atrybuty zdarzeń</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>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')}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "shapes.html#CircleElement", "<circle>")}}</td> + <td>{{Spec2 ("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName ("SVG1.1", "shapes.html # CircleElement", "<circle>")}}</td> + <td>{{Spec2 ("SVG1.1")}}</td> + <td>Początkowa definicja</td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_przeglądarki">Zgodność przeglądarki</h2> + +<div class="hidden">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam prośbę o wycofanie.</div> + +<p>{{Compat ("svg.elements.circle")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Inne podstawowe kształty SVG: <strong>{{SVGElement ('ellipse')}}</strong> , {{SVGElement ('line')}}, {{SVGElement ('polygon')}}, {{SVGElement ('polyline')}}, { {SVGElement ("rect")}}</li> +</ul> 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 +--- +<p> </p> + +<div class="callout-box"><strong><a href="pl/SVG/Przewodnik">Na początek</a></strong><br> +Kurs mający pomóc w rozpoczęciu nauki SVG.</div> + +<div> +<p><strong>Skalowalna Grafika Wektorowa (SVG)</strong> jest językiem na bazie <a href="pl/XML">XML</a>-a służącym do opisu dwuwymiarowej grafiki wektorowej. Ogólnie SVG jest tym dla grafiki czym XHTML dla tekstu.</p> + +<p>SVG jest podobny w zakresie do technologi Macromedia Flash. Jednakże tym co odróżnia SVG od Flasha jest <a class="external" href="http://www.w3.org/Graphics/SVG/">rekomendacja W3C</a> (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 <a class="external" href="http://www.w3.org/">W3C</a> jak <a href="pl/CSS">CSS</a>, <a href="pl/DOM">DOM</a> czy <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +</div> + +<p> </p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Dokumentacja" name="Dokumentacja"><a>Dokumentacja</a></h4> + + <dl> + <dt><a href="pl/SVG_w_Firefoksie">SVG w Firefoksie</a></dt> + <dd><small>Artykuł opisuje podzbiór i zachowanie specyfikacji SVG 1.1 aktualnie zaimplementowanej w Firefoksie 2.</small></dd> + </dl> + + <dl> + <dt><a href="/pl/docs/Web/SVG/Przewodnik/SVG_w_XHTML_-_Wprowadzenie">Wprowadzenie do użycia SVG w HTML-u</a></dt> + <dd><small>Ten artykuł oraz <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">powiązany przykład</a> 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.</small></dd> + </dl> + + <dl> + <dt><a class="external" href="http://jwatt.org/svg/authoring/">SVG - Podręcznik autorski</a></dt> + <dd><small>Omawiane są tutaj najczęstsze błędy w SVG oraz wyjaśnia co programiści czynią, by je naprawić.</small></dd> + </dl> + + <dl> + <dt><a href="pl/Projekt_Mozilla_SVG">Projekt Mozilla SVG</a></dt> + <dd><small>Przegląd projektu Mozilla SVG.</small></dd> + </dl> + + <dl> + <dt><a href="pl/Mozilla_SVG_FAQ">Mozilla SVG FAQ</a></dt> + <dd><small>Powyższy FAQ oparty został początkowo na grupie dyskusyjnej mozilla.dev.tech.svg oraz forach forums.mozillazine.org.</small></dd> + </dl> + + <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p> + </td> + <td> + <h4 id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4> + + <ul> + <li>Obejrzyj fora Mozilli...</li> + </ul> + + <p>{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}</p> + + <ul> + <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li> + </ul> + + <h4 id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h4> + + <ul> + <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">Walidator SVG</a></li> + </ul> + + <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p> + + <h4 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h4> + + <ul> + <li><a class="external" href="http://www.croczilla.com/svg/samples/">Przykłady SVG</a> (croczilla.com)</li> + <li><a class="external" href="http://www.carto.net/papers/svg/samples/">Więcej przykładów</a> (carto.net)</li> + </ul> + + <h4 id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h4> + + <dl> + <dd><a href="pl/XML">XML</a>, <a href="pl/HTML/Canvas">Canvas</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p><span class="comment">Categories</span></p> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p> </p> + +<p>{{ languages( { "en": "en/SVG", "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pt": "pt/SVG" } ) }}</p> 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 +--- +<p> +</p> +<h3 id="Wszystkie_inne_zasoby" name="Wszystkie_inne_zasoby"> Wszystkie inne zasoby </h3> +<ul><li> <a class="external" href="http://www.croczilla.com/svg/">Zasoby Mozilla SVG</a> +</li><li> <a class="external" href="http://svg.org/">SVG.org</a> +</li><li> <a class="external" href="http://www.svgx.org/">SVGX.org</a> +</li><li> <a class="external" href="http://www.w3.org/Graphics/SVG/">Strona domowa W3C SVG</a> +</li><li> <a class="external" href="http://www.w3.org/Graphics/SVG/Test/">Sprawdzian obsługi SVG</a> +</li><li> <a class=" external" href="http://wiki.svg.org/index.php?title=Server_Configuration" rel="freelink">http://wiki.svg.org/index.php?title=..._Configuration</a> +</li></ul> +{{ 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 +--- +<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" } ) }} |