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
- stroke-width
- stroke-linecap
- stroke-dasharray
- stroke-linejoin
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"