SVG prostokąt
Kształty SVG
SVG ma kilka predefiniowanych elementów kształtu, mogą być używane przez programistów w obsłudze i eksploatacji:
- Prostokąt <rect>
- Okrągły <okrąg>
- Owalne <elipsy>
- Linia <linia>
- Łamana <łamaną>
- Wielokąt <wielokąta>
- Ścieżka <ścieżka>
Poniższe sekcje wyjaśni ci te elementy, począwszy od prostokątnego elementu.
SVG prostokąt - <rect>
Przykład 1
<Rect> jest używany do tworzenia prostokąta oraz wariant prostokątny:
Oto kod SVG:
Przykłady
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- Szerokość i wysokość atrybutów elementów rect określić wysokość i szerokość prostokąta
- Obiekt styl jest stosowany do określenia właściwości CSS
- Właściwość CSS wypełnienie definiuje prostokąt kolor wypełnienia (RGB nazwę koloru lub wartość szesnastkową)
- Szerokość własności stroke-width CSS definiuje granicę prostokątny
- Nieruchomość udar kolor CSS definiuje granicę prostokątny
Przykład 2
Spójrzmy na inny przykład, zawiera szereg nowych właściwości:
Oto kod SVG:
Przykłady
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- X określa atrybut lewym położeniu prostokąta (na przykład, X = "0", w celu zdefiniowania prostokąta z lewej strony okna przeglądarki odległość jest 0 pikseli)
- Najlepsza pozycja y atrybut definiuje prostokąt (na przykład y = "0" z definicji prostokąta do górnej części okna przeglądarki jest 0px)
- Obiekt fill-krycie CSS definiuje przezroczystość koloru wypełnienia (zakres prawny: 0--1)
- Właściwość CSS skoku krycie definiuje przezroczystość koloru obrysu (zakres prawna: 0--1)
Przykład 3
Określ krycie całego elementu:
Oto kod SVG:
Przykłady
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
- Właściwość CSS opacity określa wartość elementu przezroczystego (zakres: 0-1).
Przykład 4
Ostatni przykład, stworzyć zaokrąglony prostokąt:
Oto kod SVG:
Przykłady
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
- Rx i Ry atrybuty mogą generować zaokrąglony prostokąt.