SVG <rect>

Tvary SVG

SVG má některé předdefinované tvarové prvky, které mohou vývojáři používat:

• Obdélník <rect>
• Kruh <kruh>
• Elipsa <elipsa>
• Řádek <čára>
• Polyline <křivka>
• Mnohoúhelník <polygon>
• Cesta <cesta>

Následující kapitoly vysvětlí každý prvek, počínaje obdélníkovým prvkem.

Obdélník SVG - <rect>

Příklad 1

Prvek <rect> se používá k vytvoření obdélníku a variací tvaru obdélníku:

Zde je kód SVG:

Vysvětlení kódu:

• Atributy width a height prvku <rect> definují výšku a šířku obdélníku
• Atribut style se používá k definování vlastností CSS pro obdélník
• Vlastnost CSS fill definuje barvu výplně obdélníku
• Vlastnost CSS stroke-width definuje šířku okraje obdélníku
• Vlastnost CSS stroke definuje barvu ohraničení obdélníku

Příklad 2

Podívejme se na další příklad, který obsahuje některé nové atributy:

Zde je kód SVG:

Vysvětlení kódu:

• Atribut x definuje levou pozici obdélníku (např. x="50" umístí obdélník 50 px od levého okraje)
• Atribut y definuje horní pozici obdélníku (např. y="20" umístí obdélník 20 px od horního okraje)
• Vlastnost CSS fill-opacity definuje neprůhlednost barvy výplně (legální rozsah: 0 až 1)
• Vlastnost CSS stroke-opacity definuje neprůhlednost barvy tahu (legální rozsah: 0 až 1)

Příklad 3

Definujte neprůhlednost pro celý prvek:

Zde je kód SVG:

Vysvětlení kódu:

• Vlastnost CSS opacity definuje hodnotu opacity pro celý prvek (legální rozsah: 0 až 1)

Příklad 4

Poslední příklad, vytvořte obdélník se zaoblenými rohy:

Zde je kód SVG:

Vysvětlení kódu:

• Atributy rx a ry zaoblují rohy obdélníku