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