SVG/Obiekty: Różnice pomiędzy wersjami
Usunięta treść Dodana treść
Nie podano opisu zmian |
|||
Linia 16:
=== Przykład #1 ===
[[Grafika:Svg example1.png|right|
<pre>
<rect x="80" y="120" width="200" height="50"
Linia 27:
=== 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 znajdujący się na współrzędnych 20x20, bez wypełnienia (przezroczysty), otoczony niebieską ramką o szerokości 10 pikseli. Zaokrąglenie rogów jest określone za pomocą atrybutów <code>rx</code> (zaokrąglenie poziome) i <code>ry</code> (zaokrąglenie pionowe). Jeżeli jeden z tych atrybutów zostanie pominięty, zostanie mu przypisana wartość drugiego. W przypadku wartości zerowej jednego z obydwu artybutów, rogi prostokąta nie zostaną zaokrąglone.
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 i mają czarne obramowanie o szerokości 2 pikseli.
Pierwszy prostokąt wypełniony jest kolorem czerwonym, a stopień zaokrąglenia rogów wynosi 20 pikseli.
Drugi prostokąt wypełniony jest kolorem niebieskim, przy czym jego wypełnienie jest widoczne w 70%. 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.
=== Atrybuty ===
| |||