W grafice wektorowej SVG można regulować przezroczystość wypełnienia oraz obramowania, a także zmieniać styl końcówki dowolnej linii. W tym drugim przypadku można skorzystać z gotowych rozwiązań lub utworzyć własne znaczniki. Nie jest to trudne i wymaga jedynie podążania za prostym schematem.
Poniższy obrazek został utworzony z obiektu polyline, który łączy kolejno punkty 1, 2, 3, 4, 5 i z powrotem do 1. Jak widać cały obrysowany kształt został wypełniony kolorem ustalonym poprzez właściwość fill. Za taki stan rzeczy odpowiada argument fill-rule, która domyślnie przyjmuje wartość nonzero:
Jednak argument fill-rule może też przyjmować wartość evenodd, która stara sę zliczyć z iloma segmentami graniczy dany segment. Jeśli wartość jest nieparzysta to segment zostaje wypełniony kolorem, ale w przypadku, gdy policzona wartość jest parzysta to segment pozostaje bez wypełnienia.
W celu ustawienia przezroczystości całego obiektu wystarczy ustalić argument opacity na wartość z przedziału [0, 1], gdzie 0 oznacza, że obiekt jest całkowicie przezroczysty, a 1, że obiekt nie prześwituje. Domyślnie wartość ta jest ustawiona na 1, a poniżej zostało przedstawione wykorzystać argument opacity:
Na obrazku nie ma jednego elementu z napisem test 0, ale nie dlatego, że nie został dopisany, a dlatego, że jest całkowicie przezroczysty. W grafice jednak przewidziano, że czasem może się przydać, aby obramowanie nie było przezroczyste, a jedynie jego wypełnienie. W celu zmiany przezroczystości wypełnienia należy ustalić fill-opacity, a w przypadku obramowania stroke-opacity. Poniższa tabelka pokazuje część możliwych kombinacji połączenia różnych wartości dwóch argumentów.
Warto zauważyć, że jeśli wartość fill-opacity oraz stroke-opacity są równe to jest to równoważne ustawieniu opacity na tę wartość.
Dotychczas używane linie to były kreski o zadanej szerokości, rozpoczynające się w punkcie P1 i kończące w punkcie P2. W grafice SVG można wybrać jeden z trzech stylów końcówki linii poprzez argument stroke-linecap. Domyślnie jest to wspomniane proste zakończenie, które odpowiadają wartości butt. Istnieje możliwość, aby na końcówkach linii było koło o średnicy równej szerokości linii i środku w punkcie P. Można tego zrobić poprzez ustalenie argumentu na round. Trzecia opcja wstawia na końcu linii kwadrat o boku równym szerokości linii id odpowiada jej wartość square. Wszystkie trzy style zostały zaprezentowane poniżej:
Warto zwrócić uwagę na to, że użycie stroke-linecap innego niż domyślnego wydłuża linię o połowę szerokości linii.
W zależności od projektu czasem potrzebne jest, aby w miejscu łączenie dwóch odcinków linii jej styl nie zawsze był ostry. Można to zmienić poprzez argument stroke-miterlimit. Wtedy wszędzie tam gdzie na rysunku wystąpi ostry kąt odpowiedni styl zostanie zastosowany. Domyślnie jest to miter czyli ostre zakończenie. W celu łagodnego zaokrąglenia na rogu wystarczy zmienić wartość argumentu na round. Istnieje jeszcze trzeci styl, który polega na ścięciu rogu i kryje sie pod nazwą bevel. Wszystkie trzy style zostały pokazane poniżej:
Do programu można dodawać nowe znaczniki, które można umieścić na końcu linii poprzez dodanie w części definicji nowego markera. Przypuśćmy, że potrzebny jest nowy znacznik końcowy do zaznaczenia odcinka. W części definicji należy utworzyć wtedy nowy obiekt marker. Obiekt ten to rysunek zapisany zgodnie z konwencją SVG, który tworzy się w ten sam sposób co wzory.
W tym jednak przypadku należy ustalić inne argumenty. Przede wszystkim identyfikator id, aby móc go wykorzystać. Do tego viewBox - pozwala określić rozmiar płótna rysunku. Do wyznaczania środka rysunku należy ustalić argumenty refX i refY. Dzięki temu można ustalić środek znacznika był dokładnie tam gdzie znajduje się punkt, albo obok punktu. Dodatkowy argument markerUnits na strokeWidth będzie zwiększał znacznik w zależności od grubości linii do której został dołączony.
Do powyższych argumentów należy określić wstępną grubość markera markerWidth oraz markerHeight, aby interpretator potrafił prawidłowo przeskalować znacznik. Ostatnim możliwą do ustawienia właściwością jest orient. W przypadku ustawienia na auto program obraca znacznik tak, aby był obrócony tak samo jak linia. Oczywiście istnieje możliwość, aby znacznik nie był obracany poprzez ustawienie orient na określony kąt. Przykładowa definicja znacznika w postaci linii może wyglądać następująco:
W celu zastosowanie znacznika na obiekcie należy określić w nim odpowiednie argumenty. Można to zrobić na trzy sposoby: marker-start - umieści znacznik na początku linii, marker-mid - umieści w każdym punkcie ścieżki prócz pierwszego oraz ostatniego. Z kolei marker-end umieści znacznik tylko na końcu linii. W wymienionej kolejności zastosowanie argumentów przedstawia poniższy rysunek:
Warto zwrócić uwagę, że jeśli element składa się tylko z punktu początkowego i końcowego to marker-mid nie zostanie wyświetlony.
W celu utrwalenia nabytych umiejętności postaraj się napisać kod poniższych obrazków bez korzystania z żadnej pomocy (artykułu, notatek, dokumentacji SVG i innych).
W poniższym przykładzie zarówno kolor wypełnienia oraz konturu ma być identyczny.
Wskazówka: W rozwiązaniu użyj znaczników, aby nie powtarzać wstawiania kółek w wielu miejscach.
