SVG/Obiekty: Różnice pomiędzy wersjami
Usunięta treść Dodana treść
m Ups... Jeszcze raz |
|||
Linia 1:
<small>< [[Programowanie:SVG]]</small>
{{Niekompletne}}
Obiekty w SVG dzielą się na następujące rodzaje: __NOTOC__
* [[#Prostokąty|Prostokąty]] <code><rect></code>
* [[#Koła i okręgi|Koła i okręgi]] <code><circle></code>
* [[#Elipsy|Elipsy]] <code><ellipse></code>
* [[#Linie|Linie]] <code><line></code>
* [[#Łamane linie|Łamane linie (polylinie)]] <code><polyline></code>
* [[#Wielokąty|Wielokąty (polygony)]] <code><polygon></code>
== Prostokąty ==
Znacznik <code><rect></code> odpowiada za tworzenie prostokątów, a także ich zaokrąglonych odpowiedników.
=== Przykład #1 ===
[[Grafika:Svg example1.png|right|180px|thumb|Prostokąt wypełniony jasno-zielonym kolorem]]
<pre>
<rect x="80" y="120" width="200" height="50"
fill="#55FF55" stroke="black" stroke-width="1" />
</pre>
Powyższy kod wygeneruje prostokąt o wymiarach 200x50 pikseli (<code>width="200" height="50"</code>) znajdujący się na współrzędnych 80x120 (<code>x="80" y="120"</code>), wypełniony jasno-zielonym kolorem (<code>fill="#55FF55"</code>), otoczony czarną ramką o szerokości 1 piksela (<code>stroke="black" stroke-width="1"</code>).
Należy zauważyć, że w danych prostokąta nie zostały wstawione informacje o pikselach, ponieważ są one domyślne dla wszystkich wartości liczbowych w dokumentach SVG.
=== Przykład #2 ===
[[Grafika:Svg example2.png|right|180px|thumb|Zaokrąglony prostokąt z niebieską ramką]]
<pre>
<rect x="20" y="20" width="500" height="200" rx="50" ry="100"
fill="none" stroke="blue" stroke-width="10" />
</pre>
Powyższy kod wygeneruje zaokrąglony prostokąt o wymiarach 500x200 pikseli (<code>width="500" height="200"</code>) znajdujący się na współrzędnych 20x20 (<code>x="20" y="20"</code>), bez wypełnienia (przezroczysty - <code>fill="none"</code>), otoczony niebieską ramką o szerokości 10 pikseli (<code>stroke="blue" stroke-width="10"</code>). Zaokrąglenie rogów jest określone za pomocą atrybutów <code>rx</code>, zaokrąglenie poziome, i <code>ry</code>, zaokrąglenie pionowe (<code>rx="50" ry="100"</code>).
W powyższym przypadku zaokrąglenie pionowe rogów wynosi połowę całej długości prostokąta w pionie, więc jego krótsze boki są całkowicie zaokrąglone.
=== Przykład #3 ===
[[Grafika:Svg example3.png|right|180px|thumb|Dwa prostokąty nachodzące na siebie]]
<pre>
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000;stroke-width:2px;fill-opacity:0.7;" />
</pre>
Powyższy kod wygeneruje dwa zaokrąglone kwadraty z wykorzystaniem CSSa. Oba z nich mają boki o długości 250 pikseli (<code>width="250" height="250"</code>) i mają czarne obramowanie o szerokości 2 pikseli (<code>style="stroke:#000000;stroke-width:2px;"</code>).
Pierwszy prostokąt wypełniony jest kolorem czerwonym (<code>style="fill:#ff0000;"</code>), a stopień zaokrąglenia rogów wynosi 20 pikseli (<code>rx="20"</code>).
Drugi prostokąt wypełniony jest kolorem niebieskim (<code>style="fill:#0000ff;"</code>), przy czym jego wypełnienie jest widoczne w 70% (<code>style="fill-opacity:0.7;"</code>). Nadana mu została przezroczystość za pomocą komendy CSS <code>fill-opacity</code> (przy czym obramowanie tego prostokąta dalej jest widoczne w 100%). Stopień zaokrąglenia rogów wynosi 40 pikseli (<code>rx="40"</code>).
=== Atrybuty ===
Prostokąty w specyfikacji SVG mogą być opisane za pomocą następujących atrybutów:
;<code>x</code>:Współrzędne osi x (poziomej), na której ma znaleźć się prostokąt. Domyślnie przyjmuje wartość "0".
;<code>y</code>:Współrzędne osi y (pionowej), na której ma znaleźć się prostokąt. Domyślnie przyjmuje wartość "0".
;<code>width</code>:Długość prostokąta. Atrybut wymagany. W przypadku wartości zerowej, element nie zostaje wyświetlony.
;<code>height</code>:Wysokość prostokąta. Atrybut wymagany. W przypadku wartości zerowej, element nie zostaje wyświetlony.
;<code>rx</code>:Stopień zaokrąglenia rogów prostokąta w poziomie.
;<code>ry</code>:Stopień zaokrąglenia rogów prostokąta w pionie.
Jeżeli atrybut <code>rx</code> zostanie podany, jednak atrybut <code>ry</code> zostanie pominięty, atrybut <code>ry</code> automatycznie otrzymuje wartość atrybutu <code>rx</code>. Podobna sytuacja ma miejsce, gdy atrybut <code>ry</code> zostanie podany, a atrybut <code>rx</code> zostanie pominięty.
Jeżeli atrybut <code>rx</code> lub <code>ry</code> będzie miał większą wartość niż połowa odpowiadającego mu boku, automatycznie zostanie pomniejszony tak, aby jego wartość wynosiła połowę odpowiadającego mu boku.
Jeżeli atrybut <code>rx</code> lub <code>ry</code> ma wartość zerową, albo oba atrybuty zostaną pominięte, wyświetlony element nie będzie posiadał zaokrąglonych kątów.
== Koła i okręgi ==
Znacznik <code><circ></code> odpowiada za tworzenie okręgów, a także ich wypełnianie.
=== Przykład #4 ===
[[Grafika:Svg example4.png|right|120px|thumb|Okrąg wypełniony czerwonym kolorem]]
Linia 9 ⟶ 82:
Należy zauważyć, że obracanie okręgu pod kątem za pomocą atrybutu <code>transform</code> jest bezużyteczne - może ono jednak mieć zastosowanie w [[#Elipsy|elipsach]].
=== Atrybuty ===
;<code>cx</code>:Oddalenie środka okręgu na osi x (poziomej). Domyślnie przyjmuje zerową wartość.
;<code>cy</code>:Oddalenie środka okręgu na osi y (pionowej). Domyślnie przyjmuje zerową wartość.
;<code>r</code>:Promień (czyli połowa średnicy) okręgu. W przypadku wartości zerowej, element nie zostaje wyświetlony.
{{ProstaNawigacja|spis=Programowanie:SVG|poprz=Spis obiektów|poprzart=Programowanie:SVG:Obiekty|nast=Dodawanie tekstu|nastart=Programowanie:SVG:Tekst}}
| |||