SVG <rect>

SVG ma kilka预先定义的形状元素，可供开发者使用和操作。

SVG 形状

SVG ma kilka预先定义的形状元素，可供开发者使用和操作：

  • Prostokąt <rect>
  • Kółko <circle>
  • Owal <ellipse>
  • Linia <line>
  • Złożona linia <polyline>
  • Wielokąt <polygon>
  • Ścieżka <path>

Następne rozdziały wyjaśnią te elementy, począwszy od prostokąta.

Znacznik <rect>

Znacznik <rect> można używać do tworzenia prostokątów oraz ich wariantów.

Aby zrozumieć jak działa, skopiuj te kod do notatnika, a następnie zapisz jako plik "rect1.svg". Umieść ten plik w katalogu web:

<?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Wyjaśnienie kodu:

  • Atrybuty width i height elementu rect definiują wysokość i szerokość prostokąta
  • Atrybut style służy do definiowania atrybutów CSS
  • Atrybut fill w CSS definiuje kolor wypełnienia prostokąta (wartości rgb, nazwy kolorów lub wartości szesnastkowe)
  • Atrybut stroke-width w CSS definiuje szerokość ramki prostokąta
  • Atrybut stroke w CSS definiuje kolor ramki prostokąta

Zobacz ten przykład

Zobaczmy przykład zawierający nowe atrybuty:

<?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Przykład wyjaśnienia:

  • Atrybut x definiuje pozycję lewej krawędzi prostokąta (np., x="0" oznacza, że odległość od lewej krawędzi okna przeglądarki wynosi 0px)
  • Atrybut y definiuje pozycję górnej krawędzi prostokąta (np., y="0" oznacza, że odległość od górnej krawędzi okna przeglądarki wynosi 0px)
  • Atrybut fill-opacity w CSS definiuje przezroczystość koloru wypełnienia (poprawny zakres to: 0 - 1)
  • Atrybut stroke-opacity w CSS definiuje przezroczystość koloru konturu (poprawny zakres to: 0 - 1)

Zobacz przykład

Definiowanie przezroczystości całego elementu:

<?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Wyjaśnienie kodu:

Właściwość opacity w CSS definiuje wartość przezroczystości całego elementu (zakres legalny: 0 - 1)

Zobacz przykład

Ostatni przykład, tworzenie prostokąta z zaokrąglonymi krawędziami:

<?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Wyjaśnienie kodu:

Właściwości rx i ry umożliwiają utworzenie zaokrąglonych krawędzi prostokąta.

Zobacz przykład