SVG/Obiekty: Różnice pomiędzy wersjami
Usunięta treść Dodana treść
m tabelka? |
Nie podano opisu zmian |
||
Linia 14:
=== Przykład #2.1 ===
▲|<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.
▲|[[Grafika:Svg example1.png|right|180px|thumb|Prostokąt wypełniony jasno-zielonym kolorem]]
=== Przykład #2.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>).
Linia 47 ⟶ 42:
style="fill:#0000ff; stroke:#000000;stroke-width:2px;fill-opacity:0.7;" />
</pre>
[[Grafika:Svg example3.png|right|180px|
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>).
Linia 74 ⟶ 69:
=== Przykład #2.4 ===
[[Grafika:Svg example4.png|right|120px|thumb|Okrąg wypełniony czerwonym kolorem]]▼
<pre>
<circle cx="120" cy="120" r="80"
fill="red" stroke="black" stroke-width="5" />
</pre>
Powyższy kod wygeneruje okrąg, który ma środek na współrzędnych 120x120 (<code>cx="120" cy="120"</code>). Promień okręgu wynosi 80 pikseli (<code>r="80"</code>), zostanie on wypełniony kolorem czerwonym (<code>fill="red"</code>), a także otoczony czarnym obramowaniem o szerokości 5 pikseli (<code>stroke="black" stroke-width="5"</code>).
Linia 93 ⟶ 87:
=== Przykład #2.5 ===
[[Grafika:Svg example5.png|right|140px|thumb|Przezroczysta elipsa z czarnym obramowaniem]]▼
<pre>
<ellipse cx="200" cy="300" rx="250" ry="80"
transform="rotate(-30)" fill="none" stroke="black" stroke-width="3" />
</pre>
Powyższy kod wygeneruje elipsę, która ma środek na współrzędnych 200x300 (<code>cx="200" cy="300"</code>). Wysokość elipsy wynosi 80 pikseli, a jej szerokość - 250 pikseli (rx="250" ry="80") - zostanie ona przezroczysta (<code>fill="none"</code>), a także otoczony czarnym obramowaniem o szerokości 3 pikseli (<code>stroke="black" stroke-width="3"</code>). Zostanie także obrócona o -30° (<code>transform="rotate(-30)"</code>).
| |||