SVG/Obiekty: Różnice pomiędzy wersjami
Usunięta treść Dodana treść
Nie podano opisu zmian |
|||
Linia 22:
</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.
Linia 33:
</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>,
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.
Linia 47:
</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 ===
Linia 68:
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|180px|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>).
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 ===
{{ProstaNawigacja|spis=Programowanie:SVG|poprz=Spis obiektów|poprzart=Programowanie:SVG:Obiekty|nast=Dodawanie tekstu|nastart=Programowanie:SVG:Tekst}}
| |||