Patterns

Patterns jest u┐ywany do wype│niania i obramowywania obiektu u┐ywanego w definicji grafiki obiektu kt≤ry mo┐e byµ niezmiennie replikowany w odstΩpie x i y do pokrywania obszaru zamalowanego. Patterns element jest definiowany za pomoc▒ elementu pattern i ma warto╢µ fill i stroke. Pierwszy atrybut patternUnit="" ma warto╢ci userSpace, userSpaceOnUse, objectBoundingBox. Definiuje system koordynat≤w dla atrybut≤w x, y, width, height. Je╢li patternUnits="userSpace ( warto╢µ domy╢lna ) x, y, width, height reprezentuj▒ warto╢ci aktualnie u┐ywane w systemie koordynat≤w wtedy kiedy element mask jest zdefiniowany. Je╢li patternUnits="userSpaceOnUse" wtedy x, y, width, height reprezentuj▒ aktu│alne warto╢ci. Je╢li patternUnits="objectBoundingBox" wtedy x, y, width, height (0,0) jest (minx,miny) oraz (1,1) jest (maxx,maxy) . x, y . To co zwykle. domy╢lna warto╢µ obydwu to 0%. Kolejny atrybuty to width

Ka┐dy z pewno╢ci▒ wie jakie efekty daj▒ filtry. Do tej pory sro┐enie takich efekt≤w jak gaussian blurs czy inne rzeczy by│o praktycznie nie mo┐liwe dla zwyk│ego webmastera. Sadze, ze czytelnicy tacy zwykli nie s▒, lecz dla nich stworzenie jakiego╢ takiego efektu by│o bardzo trudne.
Na stronie wiele grafiki to obrazki takie jak gif, jpeg lub png. Generalnie, z powodu wielu wad tego rozwi▒zania bardzo trudno by│o uzyskaµ po┐▒dany efekt, a tw≤rcy stron musieli spΩdziµ wiele czasu przy programach graficznych aby uzyskaµ po┐▒dany efekt. W przegl▒darce MS IE 5 mo┐liwe by│o zastosowanie odpowiednich skrypt≤w do uzyskania porz▒dnego efektu, jednak by│o ( jest ) to bardzo czasoch│onne, a i tak z pod NN nikt niczego nie dojrzy. To by by│o tyle wstΩpu. Przejµmy do rzeczy.

Tworzenie filtr≤w

Filtry tworzy siΩ za pomoc▒ znacznika <filter>. Filtr identyfikuje siΩ za pomoc▒ atrybutu ID. Ma on postaµ:

<filter id="pierwszyFiltr'>
<--Tre╢µ-->
</filter>

Filtr ppowinien znajdowaµ siΩ pomiΩdzy par▒ znacznik≤w &ledefs. i </defs>. Wywo│uje siΩ go za pomoc▒ atrybutu style.

Aby tworzyµ w│asne filtry trzeba znaµ podstawowe. S▒ nastΩpuj▒c podstawowe filtry:

  • feBlend - s│u┐y do mieszania dw≤ch obiekt≤w - zlewania siΩ
  • feColorMatrix - s│u┐y do przebarwiania, rozja╢niania kolor≤w, luminacji.
  • feComponentTransfer - s│u┐y do regulacji jasno╢ci, kontrastu, prog≤w obiektu
  • feComposite - decyduje o wzajemnym po│o┐eniu dw≤ch obiekt≤w i ich wzajemnym, przenikaniu siΩ
  • feConvolveMatrix - rozmazywanie obiekt≤w, mo┐na zastosowaµ do rozmazywania, zaostrzania, wrycia.
  • feDiffuseLighting - s│u┐y do sterowania ┐r≤d│em ╢wiat│a na obiekty. ªwiat│o to mo┐e byµ:
    • feDistantLight - odleg│e ┐r≤d│o ╢wiat│a
    • fePointLight - ┐r≤d│o ╢wiat│a punktowe
    • feSpotLight - ┐r≤d│o ╢wiat│a rozproszonego
  • feDisplacementMap oke╢la przemia╢zczanie siΩ kolor≤w z jednego obiektu do drugiego
  • eFlood - s│u┐y do wype│niania obiektu kolorami
  • feGaussianBlur - stosuje efekt GaussianBlur na obiekcie
  • feImage - umo┐liwia za│adowanie do obiektu inny obiekt, lub obraz
  • feMerge - umo┐liwia │▒czenie r≤┐nych efekt≤w
  • feMorphology - s│u┐y do zwiΩkszania lub zmieszania efekt≤w na kanale alfa
  • feOffset - okre╢la po│o┐enie obiektu wzglΩdem innych obiekt≤w
  • feSpecularLighting - tworzy ┐r≤d│o ╢wiat│a podobne do refletkorowego na obiekt
  • feTile - s│u┐y do replikowania obiektu (duplikat)
  • feTurbulence - s│u┐y do tworzenia tekstur

Kurs pochodzi z serwisu HTMLZone serwis webmaster≤w.