SVG - obramowanie i wypełnienie

środa, 09 maj 2012 09:31 pwimmer
Drukuj

Obramowanie

Obiekty rysowane za pomocą SVG, jak już mogliśmy się przekonać, mogą mieć nadawane atrybuty obramowania (stroke) i wypełnienia (fill). Termin stroke ma wiele znaczeń, m.in. kreska, pociągnięcie pędzlem - istotą jest jednak, jak się wydaje, obramowanie, zatem takim terminem się tu posłużymy.

<ellipse ry="77.5" rx="122.5" cy="113.5" cx="154.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>

Stroke może mieć kilka cech:

stroke

Cecha stroke określa kolor obramowania. Możemy się tu posługiwać imiennymi nazwami kolorów czy ich definicjami RGB (patrz: Kolory w kursie HTML), np. stroke="green" lub stroke="#008000"

stroke="green"

stroke-width

Cecha stroke-width określa szerokość obramowania. Możemy się tu posługiwać wartościami podanymi w znanych jednostkach, takich jak piksele czy milimetry.

stroke-width="5mm"

stroke-linecap

Stroke-linecap definiuje zakończenia linii i może przybierać wartości butt, square, round lub null. Pokazujemy je tu w tej kolejności:




Butt różni się od square tym, że butt ucina linię, podczas gdy square dodaje obramowanie na końcach (wychodzi poza ścieżkę), zatem linia jest dłuższa o to obramowanie, o wartość stroke-width.

stroke-dasharray

Stroke-dasharray jest stosowane do tworzenia kreskowanych linii, według schematu kreska-przerwa. Na przykład wartość stroke-dasharray="5,5" tworzy 5-pikselową kreskę i 5-pikselowy odstęp. Stroke-dasharray="10,10" wprowadza wartość 10 pikseli, np.

Z kolei stroke-dasharray="30,15,5,5,5,15" wprowadza inny rytm kresek i przerw.


 <circle r="80" cy="100" cx="100" stroke-dasharray="15,15" stroke-width="30" stroke="white" fill="#FF0000"/>

stroke-linejoin

Stroke-linejoin służy do tworzenia kształtu połączeń między odcinkami linii kreślonych za pomocą kształtu polyline. Są to wartości miter, round i bevel.

Przyklad zaczerpnięty z Mozilla Developer Network:

<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="40 60 80 20 120 60" stroke="blue" stroke-width="15"
      stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>
  
  <polyline points="40 140 80 100 120 140" stroke="blue" stroke-width="15"
      stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
  
  <polyline points="40 220 80 180 120 220" stroke="blue" stroke-width="15"
      stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/>
</svg>

Wypełnienie

Wypełnienie fill służy do nadawania obiektom koloru - posługujemy się tu wartościami kolorów znanymi z języka HTML.

fill="#FF0000"

fill="red"

fill="transparent"

fill="khaki"

Przezroczystość

Polecenie opacity służy do nadawania przezroczystości wypełnienia lub obramowania - wartości mieszczą się w granicach od 0 do 1.

Przykład: dwa okręgi, pierwszy o kolorze czerwonym, drugi z przezroczystością opacity="0.50"