SVG view­box

Web Designer Magazine - - Workshops Maskeer Een Responsive Video Met Svg -

14. Maak con­tour voor de Svg­tekst op

In de CSS zet je een paar op­maak­re­gels die spe­ci­iek voor de con­tour zijn. Om dat te be­rei­ken, geef je de tekst een wit­te stro­ke en maak je de vul­ling trans­pa­rant. .svg-over­lay__out­line { fill: transpa­rent; stro­ke: whi­te; stro­ke-width: 1; }

15. Con­tour ani­me­ren met stro­kedas­har­ray en -o fset

De een­vou­di­ge op­maak die je bij de vo­ri­ge stap in­stel­de, is vol­doen­de om een con­tour aan het mas­ker toe te voe­gen. Maar je zou die con­tou­ren ook kun­nen ani­me­ren door de stro­ke-das­har­ray en -o set te ver­an­de­ren. Daar­mee maak je een con­tour die iets ver­spron­gen is ten op­zich­te van het mas­ker. .svg-over­lay__out­line { ... stro­ke-das­har­ray: 2000; stro­ke-das­hoff­set: 2000; }

16. Css-ani­ma­tie voor de con­tour

Om de con­tour te ani­me­ren, maak je een nieuw set­je key­fra­mes aan in de CSS. Om­dat je slechts één ei­gen­schap ani­meert, kan de ani­ma­tie heel een­vou­dig zijn – je hoeft daar­in al­leen de das­ho set van de stro­ke te­rug op ‘0’ te zet­ten. @key­fra­mes out­line { to { stro­ke-das­hoff­set: 0;

} }

17. Pas de ani­ma­tie op de con­tour toe

Nu je de key­fra­me-ani­ma­tie ge­maakt hebt, pas je die toe op het out­line-ele­ment van on­ze SVG. Met de short­hand ‘ani­ma­ti­on’ geef je de naam, de duur en de ea­sing van de key­fra­me-ani­ma­tie door aan de ei­gen­schap. Met de waar­de ‘for­wards’ geef je aan dat de ani­ma­tie na één keer stopt. .svg-over­lay__out­line { ... ani­ma­ti­on: out­line 2.5s li­near for­wards; }

18. Maak een blur il­ter voor de SVG

De ani­ma­tie van de con­tour start als de pa­gi­na ge­la­den wordt en te­kent al­le let­ters van het woord te­ge­lijk. Dat ziet er al goed uit, maar ga nog een stap­je ver­der en maak de con­tour wa­zig met een SVG- il­ter. Dit gaus­si­aan­se il­ter zet je in de defs-tag van de SVG in het Html-be­stand. <fil­ter id=”blur­fil­ter” x=”0” y=”0” width=”100%” height=”100%”>

<fe­gaus­si­an­blur in=”sour­ce­grap­hic” std­de­vi­a­ti­on=”3 10” /> </fil­ter>

19. Pas het il­ter toe op de con­tour

Pas het nieu­we il­ter toe op de con­tour door de ei­gen­schap ‘ il­ter’ in de CSS te de in­i­ë­ren en die dan de waar­de van de link naar je il­ter te ge­ven. Door url() te ge­brui­ken en het ID van het il­ter op te ge­ven, weet de CSS dat het in de ge­la­den be­stan­den moet zoe­ken naar een ele­ment met die ID.

Haal de co­de nu door au­topre ixer om de preixes te krij­gen die je no­dig hebt voor het on­der­steu­nen van ver­schil­len­de brow­sers. Als je eer­der met SVG hebt ge­werkt, zie je mis­schien dat we geen view­box in de Svg-tag ge­brui­ken. Dat is om­dat je de tekst met vie­w­port-een­he­den wilt vorm­ge­ven zo­dat die met de brow­ser schaalt. Dat kun je ook doen door view­box voor de tekst te ge­brui­ken en de ele­men­ten dan in de SVG op te ma­ken:

<text ... font-si­ze=”368” font-fa­mi­ly=”ubunt­uBold,ubuntu” font­weight=”bold”>

<tspan x=”21” y=”504”> Pla­ce­bo</tspan> </text> In Fi­re­fox werkt dat voor de con­tour, maar niet voor het mas­ker. Om­dat de beeld­ver­hou­ding niet ge­res­pec­teerd wordt, wordt het mas­ker scheef­ge­trok­ken om in het brow­ser­ven­ster te pas­sen. In el­ke an­de­re brow­ser zie je al­leen maar een leeg scherm, maar wordt de vi­deo nog steeds op de ach­ter­grond af­ge­speeld. Op de Co­de­pen zie je daar een de­mon­stra­tie van.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.