SVG <rect>

Kształty SVG

SVG ma kilka predefiniowanych elementów kształtów dostępnych dla deweloperów:

• Prostokąt <rect>
• Kółko <circle>
• Eliptyk <ellipse>
• Prawieca <line>
• Zwarty odcinek <polyline>
• Wielokąt <polygon>
• Ścieżka <path>

Następne rozdziały zaczną się od elementu rect i omówią każdy element.

SVG prostokąt - <rect>

Przykład 1

<rect> Element jest używany do tworzenia prostokątów oraz wariacji kształtów prostokątnych:

To jest kod SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Spróbuj sam

Wyjaśnienie kodu:

• Atrybuty width i height elementu <rect> definiują wysokość i szerokość prostokąta
• Atrybut style jest używany do definiowania atrybutów CSS prostokąta
• Atrybut CSS fill definiuje kolor wypełnienia prostokąta
• Atrybut CSS border-width definiuje szerokość ramki prostokąta
• Atrybut CSS stroke definiuje kolor ramki prostokąta

Przykład 2

Zobaczmy jeszcze jeden przykład zawierający nowe atrybuty:

To jest kod SVG:

<svg width="400" height="180">
  <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 sam

Wyjaśnienie kodu:

• Atrybut x definiuje pozycję lewej krawędzi prostokąta (np. x="50" umieszcza prostokąt w odległości 50 px od lewego marginesu)
• Atrybut y definiuje pozycję górnej krawędzi prostokąta (np. y="20" umieszcza prostokąt w odległości 20 px od górnej marginesu)
• Atrybut CSS fill-opacity definiuje nieprzejrzystość koloru wypełnienia (dopuszczalne zakresy: 0 do 1)
• Atrybut CSS border-opacity definiuje nieprzejrzystość koloru konturu (dopuszczalne zakresy: 0 do 1)

Przykład 3

Definiuje wartość nieprzejrzystości całego elementu:

To jest kod SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Spróbuj sam

Wyjaśnienie kodu:

• Atrybut CSS opacity definiuje wartość nieprzejrzystości całego elementu (dopuszczalne zakresy: 0 do 1)

Przykład 4

Ostatni przykład, tworzenie prostokąta z zaokrąglonymi rogami:

To jest kod SVG:

<svg width="400" height="180">
  <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 sam

Wyjaśnienie kodu:

• Atrybuty rx i ry sprawiają, że rogi prostokąta są zaokrąglone