wtorek,
SVG: Kokarda narodowa
Zbliżające się Narodowe Święto Niepodległości to doskonała okazja do wykonania patriotycznej grafiki. W materiale omówiono sposób wykonania kokardy narodowej w formacie SVG. Do pełnego zrozumienia technicznych aspektów tekstu oraz samodzielnego wykonania podobnej grafiki niezbędne będzie zapoznanie się z poprzednio prezentowanymi materiałami (szukaj w dziale „Scalable Vector Graphics”).
Kokarda będzie składać się z sześciu prostokątów umieszczonych w odpowiedni sposób oraz jednego koła. Wszystkie prostokąty (rect) mają te same wymiary (width, height) oraz startowe położenie (x,y), jednak zostały poddane transformacji polegającej na wykonaniu obrotu o określony kąt (transform: rotate(x)). W tym przypadku jest to zawsze wielokrotność 30 stopni (180 stopni / ilość elementów). Drugi istotny parametr zastosowanej transformacji to punkt, którego względem wykonany zostaje obrót. W każdym przypadku jest to dokładnie środek prostokąta (160,160). Do wyznaczenia kąta obrotu przyjęto wartość 180 stopni, ponieważ drugie połowy prostokątów dopełniają obraz do przybliżonego kształtu koła. Zastosowano element grupujący g, dzięki czemu nie trzeba powielać deklaracji koloru wypełnienia, jest ona dziedziczona po elemencie nadrzędnym (czyli g) i zdefiniowana w jednym miejscu dla wszystkich elementów.
Pierwsza faza wykonania grafiki
<svg width="324" height="324">
<g id="e1" fill="#e9e8e7" stroke="#000" stroke-width="1" stroke-dasharray="5,15" fill-opacity=".75">
<rect x="0" y="125" width="320" height="70" />
<rect x="0" y="125" width="320" height="70" transform="rotate(30 160,160)" />
<rect x="0" y="125" width="320" height="70" transform="rotate(60 160,160)" />
<rect x="0" y="125" width="320" height="70" transform="rotate(90 160,160)" />
<rect x="0" y="125" width="320" height="70" transform="rotate(120 160,160)" />
<rect x="0" y="125" width="320" height="70" transform="rotate(150 160,160)" />
</g>
</svg>W przykładowej grafice prostokąty otrzymały obramowanie (własności stroke, stroke-width, stroke-dasharray odziedziczone po nadrzędnym elemencie grupującym) oraz niewielką przezroczystość (również dziedziczoną własność opacity). Pozwala to łatwiej zademonstrować zastosowany podczas rysowania mechanizm, w ostatecznej wersji własności te zostały usunięte.
Efekt finalny
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kokarda narodowa</title>
</head>
<body style="background: #ababab;padding:20px;">
<svg width="320" height="320">
<g id="e1" fill="#e9e8e7">
<rect x="0" y="125" rx="5" ry="30" width="320" height="70" />
<rect x="0" y="125" width="320" height="70" transform="rotate(30 160,160)" />
<rect x="0" y="125" rx="5" ry="30" width="320" height="70" transform="rotate(60 160,160)" />
<rect x="0" y="125" width="320" height="70" transform="rotate(90 160,160)" />
<rect x="0" y="125" rx="5" ry="30" width="320" height="70" transform="rotate(120 160,160)" />
<rect x="0" y="125" width="320" height="70" transform="rotate(150 160,160)" />
</g>
<circle cx="160" cy="160" r="100" fill="#d4213d" />
</svg>
</body>
</html>W ostatecznej wersji kokardy usunięto zbędne obramowania i dodano jedno koło (circle), którego środek pokrywa się z punktem środka każdego prostokąta (160,160). Aby zniwelować efekt „kwadratowej kokardy”, zaokrąglono nieco kształty (własności rx i ry) co drugiego prostokąta. W prezentowanej grafice dołączono drugą kokardę o odwrotnie zastosowanych barwach.
