Kurz SVG - vyplňování 2.
03. 08. 2004 | Martin Hejral | Webová grafika | Komentáře: 0
V předchozím článku jsme si probrali základy vyplňování vektorových objektů ve Scalable Vektor Graphics. Tentokrát se budeme věnovat té zajímavější části tématu - přechodům barev, používání textur a nastavování průhlednosti objektů.
Dědičnost atributů
Dědičnost probíhá obdobně jako například u stylů v HTML. Jen si musíte dobře uvědomit, že vyplňování samotné se aplikuje na každý synovský objekt individuálně - nikdy ne na celou skupinu (na nadřazený rodičovský objekt)!
Konstantní barva
Hodnoty barev lze zapisovat v prostoru sRGB - shodně s HTML nebo CSS - například stroke="blue" nebo fill="#FF8080". Norma podporuje i správu barev pomocí ICC profilů.
Přechody barev
Teoreticky definovat přechod barev můžeme třeba následovně: "Mějme dva prostorově oddělené body se dvěma různými barvami. Přechod pak vznikne tím, jak se po spojnici těchto dvou bodů mění (přechází) barva prvního bodu v barvu druhého bodu."
SVG umožňuje ovšem daleko lepší triky - krom toho, že přechody mohou být lineární nebo kruhové, lze na úsečce mezi krajními definičními body SVG přechodu rozmístit libovolnou posloupnost zlomových (přechodových) barevných bodů a vyrobit si tak třeba duhu. Navíc jsou možné různé způsoby zrcadlení či opakování definované základní posloupnosti.
Přechodový (zlomový) bod - element stop
Elementy stop určují barvu ve zlomových bodech a musí být proto v přechodu minimálně dva! Mohou nést následující atributy:
- stop-color - barva
- stop-opacity - průhlednost (může se libovolně měnit podél přechodu, stejně jako jakýkoli jiný z RGB kanálů!)
- offset - definuje umístění bodu na úsečce mezi dvěma hraničními body přechodu, proto bude většinou v rozsahu 0 až 1, respektive 0 až 100 % (pokud nebyl změněn výchozí souřadnicový systém - viz níže)
Lineární přechod - element linearGradient
Element linearGradient je používán pro definici lineárního přechodu. Jeho obsahem je sada elementů stop. Může nést následující atributy:
- id - jméno pro pozdější odkazování
- gradientUnits - (nepovinný) vybere jeden ze dvou možných souřadnicových systémů pro udávání hodnot atributů ("x1", "y1", "x2", "y2") definujících vektor přechodu:
- "userSpaceOnUse" - použije se aktuální systém souřadnic právě vyplňovaného objektu
- "objectBoundingBox" - tato výchozí hodnota definuje souřadnicový systém orientovaný uvnitř rámečku ohraničujícího konkrétní objekt, na který se přechod aplikuje - souřadnice (0,0), respektive (0%,0%), jsou v levém horním rohu a (1,1), respektive (100%,100%), v pravém spodním rohu ohraničení vyplňovaného objektu
Podobná konvence se v udávání rozměrů, vztažených k nějakému objektu, opakuje na mnoha místech, dobře si ji zapamatujte!
- x1, y1, x2, y2 - (nepovinné) dva páry souřadnic určují úsečku, podél které se přechod vykresluje; výchozí hodnoty: (0,0) a (1,1) - ve většině aplikací je proto ani nebudete muset nastavovat
- gradientTransform - (nepovinný) seznam dodatečných souřadnicových transformací, jež se aplikují na přechod
- spreadMethod - (nepovinný) určuje opakování nadefinovaného přechodu - 1x, zrcadlení nebo nekonečné opakování - hodnoty: pad (výchozí), reflect, repeat
- xlink:href - (nepovinný) odkaz na jiný přechod (můžete tak složit komplexní sekvenci barev z několika jednodušších přechodů)
<?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="320px" height="160px" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>5.9.2 Linear gradient paint server</title>
<g>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<!-- zde je vykreslen prechod -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="600" height="200"/>
<!-- obrys platna -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
</g>
</svg>
Zobrazení lineárního přechodu (originální SVG, cca 1 kB)
Kruhový přechod - element radialGradient
Element radialGradient je používán pro definici kruhového přechodu. Jeho obsahem je sada elementů stop. Může nést následující atributy:
- id - jméno pro pozdější odkazování
- gradientUnits - (nepovinný) vybere jeden ze dvou možných souřadnicových systémů pro udávání atributů ("cx", "cy", "r", "fx", "fy") definujících kružnice přechodu:
- "userSpaceOnUse" - použije se aktuální systém souřadnic právě vyplňovaného objektu
- "objectBoundingBox" - tato výchozí hodnota definuje souřadnicový systém orientovaný uvnitř rámečku ohraničujícího konkrétní objekt, na který se přechod aplikuje - souřadnice (0,0), respektive (0%,0%), jsou v levém horním rohu a (1,1), respektive (100%,100%), v pravém spodním rohu ohraničení vyplňovaného objektu
- cx, cy, r - (nepovinné) definují vnější, největší kružnici v přechodu; výchozí hodnoty: 50%
- fx, fy - (nepovinný) středový bod přechodu, kterému odpovídá přechodový bod na 0%; výchozí hodnota = "cx", "cy"
- gradientTransform - (nepovinný) seznam dodatečných souřadnicových transformací, jež se aplikují na přechod
- spreadMethod - (nepovinný) určuje opakování nadefinovaného přechodu - 1x, zrcadlení nebo nekonečné opakování - hodnoty: pad (výchozí), reflect, repeat
- xlink:href - (nepovinný) odkaz na jiný přechod (můžete tak složit komplexní sekvenci barev z několika jednodušších přechodů)
<?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="320px" height="160px" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>5.9.3 Radial gradient paint server</title>
<g>
<defs>
<radialGradient id="MyGradient"
gradientUnits="userSpaceOnUse"
cx="400" cy="200" r="300" fx="400" fy="200">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="red" />
</radialGradient>
</defs>
<!-- vykresleni prechodu zde -->
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="600" height="200"/>
<!-- obrys platna -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
</g>
</svg>
Zobrazení kruhového přechodu (originální SVG, cca 2 kB)
Vzorky alias textury
Element pattern slouží k vyplnění dané plochy předdefinovaným grafickým prvkem, který je pravidelně rozmnožen (replikován) s konstantním opakováním podél obou os (X, Y) tolikráte, aby vyplnil celou definovanou plochu. Může nést následující atributy:
- patternUnits - (nepovinný) vybere jeden ze dvou možných souřadnicových systémů pro atributy ("x", "y", "width", "height") definující replikovaný vzorek:
- "userSpaceOnUse" - použije se aktuální systém souřadnic právě vyplňovaného objektu
- "objectBoundingBox" - tato výchozí hodnota definuje souřadnicový systém orientovaný uvnitř rámečku ohraničujícího konkrétní objekt, na který se přechod aplikuje - souřadnice (0,0), respektive (0%,0%), jsou v levém horním rohu a (1,1), respektive (100%,100%), v pravém spodním rohu ohraničení vyplňovaného objektu
- patternContentUnits - (nepovinný) definuje souřadnicový systém pro obsah vzorku (pokud byste současně nadefinovali i viewBox, bude patternContentUnits ignorován), význam hodnot viz atribut patternUnits
- patternTransform - (nepovinný) seznam dodatečných souřadnicových transformací, jež se aplikují na texturu
- xlink:href - (nepovinný) odkaz na jinou texturu (můžete tak složit komplexní texturu z několika jednodušších)
<?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="320px" height="160px" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>5.10 Ukazka vzorku</title>
<defs>
<pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 10 10" >
<path d="M 1 1 L 9 1 L 5 9 z" fill="red" stroke="blue" />
</pattern>
</defs>
<!-- elipsa vyplnena vzorkem -->
<ellipse fill="url(#TrianglePattern)"
stroke="violet" stroke-width="5"
cx="400" cy="200" rx="350" ry="150" />
<!-- obrys platna -->
<rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/>
</svg>
Zobrazení SVG textury (originální SVG, cca 1 kB)
Průhlednost objektu a skupiny
Atribut "opacity" určuje celkovou průhlednost jednoho prvku nebo celé skupiny - lze jej přidat například i do elementu g. Existuje ovšem zásadní rozdíl mezi průhlednostmi popsanými v předchozích článcích a touto, určenou v atributu "opacity". Zatímco totiž ty předcházející se projevily ihned v místě zápisu v bezprostřední akci vykreslení, tuto můžeme chápat jako jakýsi postprocessing (následné zpracování). Teprve až poté, co je vykreslen celý objekt nebo skupina, je pomocná grafická paměť sloučena s pozadím s přihlédnutím k hodnotě "opacity". Pro lepší pochopení doporučuji znovu prostudovat zobrazovací a vykreslovací model SVG.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="320px" viewBox="0 0 1200 350"
xmlns="http://www.w3.org/2000/svg">
<title>5.11 Vliv atributu 'opacity' na skupinu</title>
<rect x="100" y="100" width="1000" height="150" fill="blue" />
<!-- cervene kruhy se zvetsujici se pruhlednosti -->
<circle cx="200" cy="100" r="50" fill="red" opacity="1" />
<circle cx="400" cy="100" r="50" fill="red" opacity=".8" />
<circle cx="600" cy="100" r="50" fill="red" opacity=".6" />
<circle cx="800" cy="100" r="50" fill="red" opacity=".4" />
<circle cx="1000" cy="100" r="50" fill="red" opacity=".2" />
<!-- nasleduje demonstrace 'opacity' na prvku 'g' -->
<g opacity="1" >
<circle cx="182.5" cy="250" r="50" fill="red" opacity="1" />
<circle cx="217.5" cy="250" r="50" fill="green" opacity="1" />
</g>
<!-- zde SPRAVNE MUSI zeleny kruh zcela vyriznout cerveny -->
<g opacity=".5" >
<circle cx="382.5" cy="250" r="50" fill="red" opacity="1" />
<circle cx="417.5" cy="250" r="50" fill="green" opacity="1" />
</g>
<!-- zeleny kruh umisten NAD cervenym -->
<g opacity="1" >
<circle cx="582.5" cy="250" r="50" fill="red" opacity=".5" />
<circle cx="617.5" cy="250" r="50" fill="green" opacity=".5" />
</g>
<!-- zeleny kruh umisten POD cervenym -->
<g opacity="1" >
<circle cx="817.5" cy="250" r="50" fill="green" opacity=".5" />
<circle cx="782.5" cy="250" r="50" fill="red" opacity=".5" />
</g>
<!-- zde SPRAVNE MUSI zeleny kruh zcela vyriznout cerveny -->
<g opacity=".5" >
<circle cx="982.5" cy="250" r="50" fill="red" opacity=".5" />
<circle cx="1017.5" cy="250" r="50" fill="green" opacity="1" />
</g>
<!-- obrys platna -->
<rect x="2" y="2" width="1196" height="346"
fill="none" stroke="blue" />
</svg>
Vliv atributu "opacity" na skupinu (originální SVG, cca 1 kB)
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Další aktuální články na interval.cz
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
Tematicky související články
- Kurz SVG - vyplňování 1.
- Kurz SVG - bitmapové efekty (elementární grafické filtry 2.)
- Kurz SVG - grafická primitiva
- Kurz SVG - animace (časování)
- Kurz SVG - ořezávání a maskování
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
