View
219
Download
0
Category
Preview:
Citation preview
argo
navi
s.co
m.b
r GradientesePadrões
• ComSVGvocêpodepintarointerior(fill)ouotraço(stroke)defigurasetextousando• Coresopacasoutransparentes• Gradientes(degradê)• Padrões(imagensrepe=das)
• Gradientesepadrõessãodefinidos(em<defs>)eiden=ficadoscomidparaquepossamserreferenciados
• Objetospodemusargradientesepadrõescomo=ntaparapreenchertraçoseinteriordosobjetos• Useatributofilloustrokecomfunçãourl(#xpointer)<rectfill="url(#id_gradiente)"...>
<circlestroke="url(#id_padrao)"..>
• h7p://www.w3.org/TR/SVG/pservers.html
2
argo
navi
s.co
m.b
r
Transparência
Gradientes• Gradientessãovariaçõessuavesdeduasoumaiscores• Hádois=posdegradientes
• Lineares<linearGradient>querepresentaumalinha,etemcoordenadasx1/x2ey1/y2
• Radiais<radialGradient>querepresentaumcírculoetemcoordenadascx,cyer
• Osvaloressãorela=vos(percentagensouvaloresentrezeroeum)aográficoqueserápintadocomogradiente• 0%a100%,0.0a1.0
• Pontosdeparadainiciais,finaiseintermediáriossãomarcadoscomumtag<stop>• Atributooffsetmarcaposiçãonalinha• Cada<stop>podedefinirumacor(atributostop‐color)e/ou
transparência(stop‐opacity)paraoponto• Coresintermediáriassãocalculadasporinterpolação
0%25%50%75%100%
argo
navi
s.co
m.b
r Exemplosdegradientes
4
<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="800"height="600"><defs><linearGradientid="linear1"x1="0"y1="0%"x2="100%"y2="0"><stopoffset="0%"stop‐color="black"stop‐opacity="0.5"/><stopoffset="45%"stop‐color="rgb(225,225,255)"stop‐opacity="0.8"/><stopoffset="55%"stop‐color="rgb(225,225,255)"stop‐opacity="0.8"/><stopoffset="100%"stop‐color="black"stop‐opacity="0.5"/></linearGradient><radialGradientid="radial1"cx="75%"cy="25%"r="90%"><stopoffset="0.01%"stop‐color="rgb(225,225,255)"/><stopoffset="90%"stop‐color="navy"/><stopoffset="100%"stop‐color="black"/></radialGradient></defs>
<circler="100"cx="400"cy="300"fill="url(#radial1)"/><circler="30"cx="250"cy="200"fill="url(#radial1)"/><rectx="50"y="55"height="170"width="60"fill="url(#radial1)"/><rectx="50"y="50"height="180"width="60"fill="url(#linear1)"/>
</svg>
argo
navi
s.co
m.b
r Gradientelinear
• Ogradientelinearéumalinha• Gradientever=cal: x1=x2=0, y1=0,y2=1• Gradientehorizontal: y1=y2=0, x1=0,x2=1• Ouvarieosvaloresparaproduziroffsetseinclinação
• Paracoordenadasx,yuseproporção(0.0a1.0ou0%a100%)
• Ogradienteépintadoaolongodovetorperpendicular(normal)aovetordogradiente
5
<linearGradientx1="0"y1="0.1"x2="0.9"y2="0"id="arcoiris"><stopoffset="0"stop‐color="rgb(255,0,0)"/><stopoffset="0.3"stop‐color="rgb(180,180,0)"/><stopoffset="0.6"stop‐color="rgb(0,180,0)"/><stopoffset="0.8"stop‐color="blue"/><stopoffset="1"stop‐color="rgb(128,0,220)"/></linearGradient>
offsetx290%
y110%
vetornormal
argo
navi
s.co
m.b
r Gradienteradial
• Gradientesradiaissãocírculos• r,cxecysãofraçõesdoespaçodográfico• cx0.5,cy0.5er0.5=gradientenocentro,comcírculoinscrito• Elementos<stop>marcampontosnoraio(0%=origem,100%=borda)
6
<svg...><defs><radialGradientcx="0.5"cy="0.5"r="0.5"id="arcoiris"><stopoffset="0"stop‐color="rgb(255,0,0)"/><stopoffset="0.25"stop‐color="rgb(255,255,64)"/><stopoffset="0.5"stop‐color="rgb(64,255,64)"/><stopoffset="0.75"stop‐color="rgb(64,64,255)"/><stopoffset="1"stop‐color="rgb(128,0,255)"/></radialGradient><radialGradientcx="0.25"cy="0.25"r="1"id="sombra"><stopoffset="0"stop‐color="rgb(255,255,255)"/><stopoffset="0.5"stop‐color="rgb(0,128,255)"/><stopoffset="1"stop‐color="rgb(128,0,255)"/></radialGradient></defs>
<rectx="0"y="0"width="200"height="200"fill="url(#arcoiris)".../><circlecx="100"cy="100"r="100"fill="url(#arcoiris)".../><rectx="0"y="0"width="200"height="200"fill="url(#sombra)".../><circlecx="100"cy="100"r="100"fill="url(#sombra)".../></svg>
argo
navi
s.co
m.b
r Reusodecorescomgradientes
• Seumgradientefordefinidocomumaúnicacor,oefeitoéigualaumfill• Permiteconstruircoresreferenciáveispelonome
• Exemplo:
7
<defs><linearGradientid="corPretas"><stopoffset="0"stop‐color="rgb(64,32,32)"/></linearGradient><linearGradientid="corBrancas"><stopoffset="0"stop‐color="rgb(255,225,200)"/></linearGradient><rectid="rp"x="0"y="0"width="20"height="20"fill="url(#corPretas)"/><rectid="rb"x="0"y="0"width="20"height="20"fill="url(#corBrancas)"/>...<gid="tabuleiro">...</g><gid="peao">...</g><gid="peaoBranco"fill="url(#corBrancas)"stroke="url(#corPretas)">...</g><gid="peaoPreto"fill="url(#corPretas)"stroke="url(#corBrancas)">...</g></defs>
<usexlink:href="#tabuleiro"transform="translate(50,50)"></use><usexlink:href="#peaoBranco"transform="translate(125,110)"></use>...<usexlink:href="#peaoPreto"transform="translate(245,230)"></use>
argo
navi
s.co
m.b
r Padrões(azulejos)
• Oelemento<paJern>replicaumobjetográficoparapintaroucontornarumobjeto
• Paracriareusar• Definaoelemento<paJern>em<defs>• Referencie‐oparapintarumobjeto
8
<svg...xmlns="http://www.w3.org/2000/svg"><defs><pattern id="TrianglePattern"patternUnits="userSpaceOnUse" x="0"y="0"width="100"height="100" viewBox="001010"><pathd="M00L70L3.57z"fill="red"stroke="blue"/></pattern></defs>
<!‐‐Theellipseisfilledusingatrianglepatternpaintserverandstrokedwithblack‐‐><ellipsefill="url(#TrianglePattern)"stroke="black"stroke‐width="5"cx="400"cy="200"rx="350"ry="150"/></svg>
Fonte:W3C(specSVG)
argo
navi
s.co
m.b
r <paJern>eviewBox
• Coordenadasx,y,heightewidth:dimensõesdopadrão• AtributopaJernUnits="userSpaceOnUse"determinaqueas
coordenadasusadasserãoasdoobjetoqueaplicaopadrão
• Cadaunidadedepadrão("azulejo")deveterseuslimitesrecortadosdentrodeumviewBox• Istonãoéobrigatório,maséumaboaprá=ca
• Desenhodecada"azulejo"nascoordenadasdoviewBox• Noexemploabaixo,haveráclippingde4x2pixelsdaimagem
9
<defs><patternid="peixes"patternUnits="userSpaceOnUse"x="0"y="0"width="80"height="50"viewBox="002010"><imagexlink:href="TheFish.png"x="0"y="0"width="24"height="12"/></pattern></defs><rectx="0"y="0"width="300"height="300"fill="url(#peixes)"/>
argo
navi
s.co
m.b
r Máscaras
• Máscarasalfasãousadasemcomposiçãográfica• Sãodefinidascomoelemento<mask>edevemconteruma
imagemfonte(formadaporqualquerimagem,elementográficooucombinaçãodeelementos)
• Amáscarapodeserreaplicadaavárioselementosgráficos• Exemplo:aplicaçãodemáscarasimples(criadano
PhotoShop)pararemoverofundodeumaimagem
10
<defs><maskid="mascaraPeixe"x="0"y="0"width="300"height="150"><imagexlink:href="TheFishMask.png".../></mask></defs><rectx="0"y="0"width="600"height="300"fill="aquamarine"/><gtransform="translate(100,50)"><imagexlink:href="TheFish.png"mask="url(#mascaraPeixe)"/></g>
TheFishMask.png(fontedamáscara)
TheFish.png
Resultado
argo
navi
s.co
m.b
r
0.03 0.03 0.0 0.0
0.07 0.07 0.0 0.0
0.72 0.72 1.0 0.5
0.72 0.72 1.0 0.5
Comofuncionaumamáscara• Amáscaraéformadaporpixelsdetransparência(alfa)quesão
mul=plicadospelovalordospixelsdoobjeto‐alvodamáscara
• SeafontedamáscaraforumaimagemcoloridaRGB(24bits),ovaloralfadecadapixelésualuminância,ob=dapelafórmula*• Luminância=0.2125R+0.7154G+0.0721B
• Seforimagemmonocromá=ca(tonsdecinza),ovaloralfacorrespondeaoníveldecinza(preto=0)
• Seaimagemforde32bits(RGBA),ofatoralfadecadapixeldafonteémul=plicadopelaluminânciaparaobteroalfaresultante
11
MáscaraRGBA Converteemalfa ResultadoAlvodamáscara
00f 00f fff fff0.5 0.5 0.0 0.000f 00f fff fff1.0 1.0 0.0 0.00f0 0f0 fff fff1.0 1.0 1.0 0.5 0f0 0f0 fff fff1.0 1.0 1.0 0.5
*segundoopadrãosRGB,adotadopelaespecificaçãoSVG
argo
navi
s.co
m.b
r MáscarausandofigurasSVG
12
<defs><polygonid="poligono"points="50,0150,0150,50200,50200,150150,150150,20050,20050,1500,1500,5050,50"fill="white"/><rectid="retangulo"width="100"height="100"x="50"y="50"fill="red"/><circleid="circulo"cx="100"cy="200"r="50"fill="green"/>
<maskid="mascara"x="0"y="0"width="200"height="200"><usexlink:href="#poligono"/><usexlink:href="#retangulo"/><usexlink:href="#circulo"/></mask></defs>
<usexlink:href="#circulo"stroke="gray"stroke‐dasharray="55"/><usexlink:href="#retangulo"stroke="gray"stroke‐dasharray="55"/><usexlink:href="#poligono"stroke="gray"stroke‐dasharray="55"/><textx="100"y="300"font‐size="24"text‐anchor="middle">Mascara</text>
<rectx="0"y="0"height="200"width="200"fill="blue"transform="translate(250,0)"/><circlecx="100"cy="100"r="100"fill="red"transform="translate(250,250)"/><rectx="0"y="0"height="200"width="200"fill="blue"mask="url(#mascara)"transform="translate(500,0)"/><circlecx="100"cy="100"r="100"fill="red"mask="url(#mascara)"transform="translate(500,250)"/>
argo
navi
s.co
m.b
r
MáscaraRGBA
Resultado
Máscarasderecorte(1bit)
• Paraisolaraimagemdopeixe,foiusadaumamáscaraderecorte
• Cadapixelbranco(#FFF)usaapenasdoisvaloresalfa• 0=100%transparente(excluidoresultado)• 1=100%opaco(incluinoresultado)
• Oucadapixeldealfa=1usaapenasduascores• #000=100%pretoopaco(excluidoresultado)• #FFF=100%brancoopaco(incluinoresultado)
• Resultadodesse=podemáscaraequivaleàaplicaçãodeclipping
13
1.0 1.0 0.0 0.0
1.0 1.0 0.0 0.0
1.0 1.0 1.0 1.0
1.0 1.0 1.0 1.0
13
ResultadoAlvodamáscara
argo
navi
s.co
m.b
r Atributosde<mask>
• xey,heightewidth• Coordenadas,alturaelarguradamáscara
• Oresultadodaaplicaçãodamáscaralevaemcontaascoordenadasedimensões• Resultadoserátruncadosecoordenadasedimensõesdoobjetonãocouberemnamáscaraouvice‐versa
• maskUnits="userSpaceOnUse|objectBoundingBox"• DefaultéobjectBoundingBox,queconsideraascoordenadasx,y,heightewidthpercentagensdoobjetonoqualamáscaraéaplicada
• userSpaceOnUseconsideraosconsideravaloresdosistemadecoordenadasusadoquandoamáscaraéreferenciada
14Vejamaisemh7p://www.w3.org/TR/SVG/masking.html
argo
navi
s.co
m.b
r Recorte(clipping)
• Gráficospodemtambémpodemserrecortadosporumcaminhodefinidopeloelemento<clipPath>• Funcionacomomáscarade1bit
• Áreasforadoclippingpathnãosãodesenhadas• Caminhoécombinaçãodoselementosusadosnadefinição
• Qualquerobjetopodeaplicarorecortecomoatributoclip‐path,querecebeumafunçãodexpointerurl(#idref)parao<clipPath>
• Oatributoclip‐ruleseaplicadoaumelementodentrodo<clipPath>comporta‐secomofill‐rulenoresultado• Funcionaparapolígonos,caminhos,etc.
• Exemplodepolígonoscomfill‐rule
15
fill‐rule="nonzero" fill‐rule="evenodd"
argo
navi
s.co
m.b
r Exemplodeclippingcom<clipPath>
16
<svg...viewBox="00500500"><defs><clipPathid="poly"><polygonpoints="50,50300,300300,50100,5050,300300,150300,250"clip‐rule="evenodd"/><circler="50"cx="200"cy="300"clip‐rule="evenodd"/></clipPath></defs>
<imagex="0"y="0"height="500"width="600"xlink:href="lua.png"clip‐path="url(#poly)"transform="translate(20,20)"/></svg>
argo
navi
s.co
m.b
r Filtros<filter>
• Filtroscombinamalgoritmosparacomporefeitosgráficos• Composições,desfoques,pontosdeluz,mesclagens,etc.
• Podemseraplicadosemobjetosdiferentes
• Definidoscom<filter>queconfiguraeconcatenaumoumaisalgoritmosprimiYvos(cadaumrealizaumaoperação)• Háatributosesub‐elementosprópriosparacadaprimi=vo
• Detalhesnaespecificação:h7p://www.w3.org/TR/SVG/filters.html
• Objetosreferenciamofiltrocomoatributofilter• <rect...filter="url(#filtro)"/>
• Dimensõesdefault• x=‐10,y=‐10,height=120%,width=120%• Geralmentesedefineumfiltrocommaisespaçopoisefeitos
podemvazaralémdoslimitesdográfico17
argo
navi
s.co
m.b
r ElementosdefiltrodoSVG1.1
• <feBlend/>• Combinaduasimagens;atributos:mul=ply,screen,darken,etc.
• <feColorMatrix/>• Defineumfiltroatravésdeumamatrizdetransformaçãodecores.
• <feComponentTransfer/>• Ajustedebrilho,contraste,balanceamentodecores,etc.
• <feComposite/>• Combinaduasimagensusandoalgoritmosdecomposição
• <feConvolveMatrix/>• Aplicaumamatrizdeconvoluçãoparadesfoque,embossing,etc.
• <feDiffuseLigh=ng/>• Aplicaumefeitodeluzdifusaemumaimagemusandoocanalalfa.
• <feDisplacementMap/>• Efeitorealizadodeslocandoaimagemdelugar.
• <feFlood/>• Preencheumaáreacomcoretransparênciadeterminadosnofiltro.
18
argo
navi
s.co
m.b
r ElementosdefiltrodoSVG1.1
• <feGaussianBlur/>• Desfocaaimagemusandoalgoritmogaussiano.
• <feImage/>• Usaumaimagemexternacomofonteparaofiltro.
• <feMerge/>• Combinaváriasimagensexternasparaformarofiltro.
• <feMorphology/>• Usadoparaerodiroudilataroobjetonoqualofiltroéaplicado.
• <feOffset/>• Deslocaaimagememrelaçãoàsuaposiçãoatual.
• <feSpecularLigh=ng/>• Aplicaumefeitodeluzbrilhanteemumaimagemusandoocanalalfa.
• <feTile/>• Defineumfiltrocomoumpadrãodeimagemrepe=da.
• <feTurbulence/>• Criaefeitodenuvensoumármore.
19
argo
navi
s.co
m.b
r Exemplo:desfoquegaussiano
<defs><filterid="f2"x="‐100"y="‐100"height="200"width="200"><feGaussianBlurstdDeviation="50,0"in="SourceGraphic"/></filter>
<filterid="f1"><feGaussianBlurstdDeviation="5"/></filter></defs>
<textid="text"font‐size="48"fill="blue"x="50"y="60"filter="url(#f1)">Voceprecisadeoculos?</text><gid="stardot"transform="translate(100,50)"><polygonid="star"points="250,0400,5000,200500,200100,500"fill="red"fill‐rule="evenodd"/><circleid="circ"cx="250"cy="283"r="75"fill="blue"filter="url(#f1)"/></g><imagexlink:href="TheFish.png"width="400"height="300"x="100"y="550"filter="url(#f2)"/>
argo
navi
s.co
m.b
r Entradaseresultados
• Componentesdográfico‐fonteaserfiltrado*• SourceGraphic–ográfico‐fontecompleto
• SourceAlpha–máscarasimplesdográfico‐fonte
• Amaiorpartedosprimi=vosdefiltrorecebemumaoumaisentradas(in)quepodemser
• Componentedegráfico‐fonte
• Resultado(result)doprocessamentodealgumoutroprimi=vo
• Exemplo{picodeconcatenaçãodealgoritmosdefiltro• <feXXXin="SourceAlpha"...result="passo1"/>
• <feYYYin="passo1"...result="passo2"/>
• <feZZZin="SourceGraphic"in2="passo2"operator="xor"result="passo3"/>
• Outrasfontesquepodemserusadascomoentrada• BackgroundImageeBackgroundAlpha:ofundodaimagem
• FillPainteStrokePaint:cor/padrão/gradientedepreenchimentooutraço
21*ÉpossíveltambémmanipularofundocomBackgroundImageeBackgroundAlpha
argo
navi
s.co
m.b
r Filtrocomposto
22
<svg...><defs><linearGradient...id="arcoiris">...</linearGradient>
<filterid="efeito3d"x="‐300"y="‐300"height="500"width="500"><!‐‐Brilho‐‐><feGaussianBlurin="SourceAlpha"stdDeviation="5"result="borrao"/><feFloodflood‐color="orange"flood‐opacity="1"result="laranja"/><feCompositein="laranja"in2="borrao"operator="in"result="brilho"/>
<!‐‐Sombra‐‐><feOffsetin="borrao"dx="8"dy="8"result="sombra"/>
<!‐‐Textoem3D‐‐><feSpecularLightingin="borrao"surfaceScale="5"specularConstant="1"specularExponent="15"lighting‐color="white"result="luzDifusa"><fePointLightx="‐50"y="‐200"z="300"/></feSpecularLighting><feCompositein="luzDifusa"in2="SourceAlpha"operator="in"result="luzDireta"/><feCompositein="SourceGraphic"in2="luzDireta"operator="arithmetic"k1="0"k2="1"k3="1"k4="0"result="texto3D"/>
<!‐‐Combinacaodosfiltros‐‐><feMerge><feMergeNodein="sombra"/><feMergeNodein="brilho"/><feMergeNodein="texto3D"/></feMerge></filter></defs><gtransform="translate(50,50)scale(2)"><textid="text"font‐weight="bold"font‐family="impact"font‐size="150"fill="url(#arcoiris)"x="0"y="160"filter="url(#efeito3d)">SVG</text></g></svg>
argo
navi
s.co
m.b
r Filtro
composto
23
brilho
laranja
feComposite
feOffset
sombra
SourceGraphic
SourceAlphafeComposite
feSpecularLighting
luzDifusa
borrao
feComposite
luzDireta
feFloodfeMerge
feGaussianBlur
efeito3D
texto3D
in
in
in
inin2
in
in
in2
in2
result
result
result
result
result
result
result
inin
n n nin
Início
argo
navi
s.co
m.b
r Exercícios
• Exploreoutrosalgoritmosdefiltrocomo• feTurbulence• feMerge• feBlend• feDiffuseLigh=ng• feColorMatrix
• Consulteaespecificaçãoem• h7p://www.w3.org/TR/SVG/filters.html
• Apliqueosfiltrosemdesenhosusadosemexemploseexercícios• Exploreosfiltrosvariandoatributoseparâmetros
24
Recommended