SVG <prost>

Kształty SVG

SVG ma kilka predefiniowanych elementów kształtu, z których mogą korzystać programiści:

• Prostokąt <prost>
• Okrąg <kółko>
• Elipsa <elipsa>
• Linia <linia>
• Polilinia <polilinia>
• Wielokąt <wielokąt>
• Ścieżka <ścieżka>

Kolejne rozdziały wyjaśnią każdy element, zaczynając od elementu rect.

Prostokąt SVG - <rect>

Przykład 1

Element <rect> służy do tworzenia prostokąta i wariacji kształtu prostokąta:

Oto kod SVG:

Wyjaśnienie kodu:

• Atrybuty width i height elementu <rect> definiują wysokość i szerokość prostokąta
• Atrybut style służy do definiowania właściwości CSS dla prostokąta
• Właściwość wypełnienia CSS określa kolor wypełnienia prostokąta
• Właściwość CSS stroke-width określa szerokość obramowania prostokąta
• Właściwość obrysu CSS określa kolor obramowania prostokąta

Przykład 2

Spójrzmy na inny przykład, który zawiera kilka nowych atrybutów:

Oto kod SVG:

Wyjaśnienie kodu:

• Atrybut x określa lewą pozycję prostokąta (np. x="50" umieszcza prostokąt 50 px od lewego marginesu)
• Atrybut y określa górną pozycję prostokąta (np. y="20" umieszcza prostokąt 20 px od górnego marginesu)
• Właściwość CSS fill-opacity definiuje krycie koloru wypełnienia (dopuszczalny zakres: od 0 do 1)
• Właściwość CSS stroke-opacity określa krycie koloru obrysu (dopuszczalny zakres: od 0 do 1)

Przykład 3

Zdefiniuj krycie całego elementu:

Oto kod SVG:

Wyjaśnienie kodu:

• Własność CSS opacity definiuje wartość opacity dla całego elementu (dopuszczalny zakres: od 0 do 1)

Przykład 4

Ostatni przykład, utwórz prostokąt z zaokrąglonymi rogami:

Oto kod SVG:

Wyjaśnienie kodu:

• Atrybuty rx i ry zaokrąglają rogi prostokąta