SVG <Rect>

Kształty SVG

SVG ma kilka predefiniowanych kształtów elementów, które mogą być używane przez programistów:

• Prostokąt <rect>
• Koło <circle>
• Ellipse <ellipse>
• Linia <line>
• Łamana <polyline>
• Wielokąt <polygon>
• Ścieżka <path>

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

SVG Rectangle - <rect>

Przykład 1

<rect> element jest stosowany do tworzenia prostokąta i odmiany kształcie prostokąta:

Oto kod SVG:

Code explanation:

• Szerokość i wysokość atrybuty <rect> elementu określić wysokość i szerokość prostokąta
• style atrybut jest używany do definiowania właściwości CSS prostokąta
• Właściwość CSS wypełnienia określa kolor wypełnienia prostokąta
• Właściwość CSS stroke-width określa szerokość granicy prostokąta
• Właściwość CSS udar określa kolor obramowania prostokąta

Przykład 2

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

Oto kod SVG:

Code explanation:

• x atrybut definiuje lewe położenie prostokąta (np x = "50" umieszcza prostokąt 50 px od lewego marginesu)
• y atrybut definiuje górną pozycję prostokąta (np y = "20" umieszcza prostokąt 20 px od górnego marginesu)
• Właściwość CSS fill-opacity określa przezroczystość koloru wypełnienia (legal range: 0 to 1)
• Właściwość CSS skoku krycie definiuje przezroczystość koloru obrysu (legal range: 0 to 1)

Przykład 3

Określ krycie dla całego elementu:

Oto kod SVG:

Code explanation:

• Właściwość CSS opacity określa wartość krycia dla całego elementu (legal range: 0 to 1)

Przykład 4

Ostatni przykład, utworzyć prostokąt z zaokrąglonymi rogami:

Oto kod SVG:

Code explanation:

• RX i ry atrybuty zaokrągla narożniki prostokąta