Share
Het spreekt voor zich dat SVG niet zo vaak wordt gebruikt als veel mensen in de webontwikkelingsgemeenschap denken dat het zou moeten zijn. Het debat terzijde schuiven, in deze tutorial, zal ik laten zien hoe ik inline SVG's gebruik, een reeks technieken bestrijkt en de interactie tussen webpagina en afbeelding onderzoekt. Bij gebruik in combinatie met andere opkomende standaarden in HTML5, JavaScript en CSS3, kunnen inline SVG's aanzienlijk bijdragen aan de gebruikerservaring.
U kunt communiceren met de SVG-elementen met behulp van DOM-technieken, net als met andere webpagina-elementen.
In deze zelfstudie gaan we door een praktisch voorbeeld van een inline SVG werken door een eenvoudig onderdeel te maken dat een recorddek vertegenwoordigt. Het record zal draaien en de gebruiker kan ermee communiceren - drukken om het te vertragen en loslaten om het opnieuw te versnellen. De SVG bevat ook een knop waarop gebruikers kunnen klikken om de record te wijzigen, waardoor het uiterlijk enigszins verandert. De zichtbare SVG-elementen worden verbeterd met verlopen en slagschaduwfilters.
Bekijk de demo nu, zodat u een duidelijk idee hebt van wat we aan het bouwen zijn.
Zoals u waarschijnlijk weet, vallen inline SVG's onder de nieuwe HTML5-standaarden, dus de code die we in deze zelfstudie gebruiken, wordt niet volledig ondersteund in alle browsers. Hoewel inline SVG's theoretisch worden ondersteund in alle huidige versies van de belangrijkste browsers, worden de interne animaties en interactieve effecten die we zullen gebruiken, nog niet zo goed ondersteund. Het eindresultaat zou correct moeten werken in de huidige versies van Firefox, Chrome en Opera. Zoals altijd met HTML5-technieken, moet u ervoor zorgen dat u niet vertrouwt op deze effecten op live-sites waaraan u werkt en neem waar mogelijk alternatieven op.
Laten we ingaan en beginnen met het maken van een HTML5-paginaoverzicht, zoals het volgende:
Een van de belangrijkste voordelen van het gebruik van SVG is hoe schaalbaar het is. Om dit te benutten, gaan we voornamelijk relatieve waarden gebruiken om de SVG-inhoud te definiëren. Voeg een containerelement toe voor de SVG in de paginabody:
Als u wilt zien hoe de SVG in het element containing zit, voegt u het volgende toe aan de stijlsectie in uw paginakop:
#picHolder background: #dedeff; rand: 1px vast # 666666;
Voeg in het containerelement in de hoofdtekst van uw pagina de SVG-elementomtrek als volgt toe:
We hebben de breedte en hoogte ingesteld op 100%, omdat we de breedte van het bevattende element zullen specificeren. In plaats van de dimensies expliciet op te geven, gebruiken we in plaats daarvan een JavaScript-functie om te laten zien hoe gemakkelijk u de SVG op en neer kunt schalen. U kunt een vaste breedte en hoogte opnemen in de opening SVG-tag of de stijlsectie.
De zichtbare vormen in de afbeelding worden binnen het SVG-element gedefinieerd. Voordien zullen we werken aan de defs sectie. De defs sectie is waar u definities plaatst waarnaar u later kunt verwijzen bij het maken van uw vormen. Voor deze zelfstudie, de defs sectie bevat definities voor een paar verloopvullingen en een paar slagschaduwen. Voeg dit nieuwe gedeelte toe binnen het SVG-element:
De items die we in deze sectie plaatsen, worden niet echt in de afbeelding weergegeven, maar worden gebruikt als vullingen en filters voor de vormen die wel worden gebruikt. We voegen verschillende verloopvullingen toe; dus laten we ze allemaal achter elkaar doornemen.
Eerst is er een lineaire gradiënt:
Dit verloop wordt opgegeven als de vulling voor het achtergrondrechthoekgebied. De x1 en y1 attributen vertegenwoordigen de startpunten van het verloop binnen de gevulde vorm, waarbij het verloop zich van daaruit naar het punt ontvouwt dat wordt weergegeven met x2 en y2. In dit geval loopt het verloop van boven naar beneden. De stopelementen vertegenwoordigen kleurpunten in het verloop. De eerste stelt dat 10% vanaf het begin van het verloop een effen donkerrode kleur zal hebben en de tweede stop dat 90% vanaf het einde van het verloop een gele kleur zal zijn. Tussen deze twee punten zal het verloop de kleuren in elkaar overvloeien. Beide kleuren hebben volledige dekking.
Laten we vervolgens een verloop toevoegen voor de record zelf. Deze is wat complexer - het is een radiaal verloop met verschillende kleurstops:
Een radiale gradiënt begint vanaf de binnenkant van de cirkel, waarbij de binnenste en buitenste delen van de cirkel worden gedefinieerd door cx, cy, fx en foei, vermeld naast de straal. In dit geval gaat de radiale gradiënt de gehele cirkelvormige recordvorm innemen. Het grootste deel van het record zal zwart zijn, met twee ringen met een iets lichtere kleur die de vloeiendere secties in het midden van het record en de randen vertegenwoordigen. We zullen ook in het midden een label op de plaat plaatsen, dus de eerste patch met lichtere kleuren op de plaat zal net daarbuiten verschijnen. Voeg de volgende labelverloopvulling toe:
Dit is een eenvoudige lineaire gradiënt die zal worden gebruikt als vulling voor het ronde recordlabel. Merk echter op dat de verloop-ID aan het einde ervan een nul heeft. Dit komt door het feit dat we een interactieve functie gaan toevoegen, waardoor de gebruiker het record kan "veranderen". Een JavaScript-functie schakelt tussen een reeks verloopvullingen voor het labelelement. Voeg voor dit doel nog een paar gradiënten toe:
De verlopen hebben elk een ID die eindigt met een incrementerend geheel getal, zodat we ze in JavaScript kunnen doorlopen. Definieer nu een ander verloop om een glanseffect te creëren bovenop het record:
Deze keer maakt het verloop gebruik van ondoorzichtige en alfa transparante kleurstops; het effect zal een subtiele glans over de hele plaat zijn. Ten slotte hebben we een metalen opvulling nodig voor de knop en spil:
Deze keer is de radiale gradiënt iets uit het midden om een gevoel van diepte en licht te creëren, wat wordt aangevuld door een slagschaduwfilter.
Voordat we klaar zijn met de defs sectie, voeg een paar slagschaduwen toe om sommige vormen een beetje meer diepte te geven:
Deze verschijnt achter het recordgebied. De X, Y, breedte en hoogte eigenschappen verwijzen naar de positie en afmetingen binnen de vorm met dit filter. De offset definieert de schaduw ten opzichte van de oorspronkelijke vorm. De vervaging voorkomt dat de offset-vorm een effen kleur krijgt, zodat deze als een schaduw wordt weergegeven. In dit geval verschijnt alleen de schaduw, niet de vorm zelf - de schaduw wordt gedefinieerd door een speciale vorm die achter de recordvorm wordt geplaatst. Voor de gebruikersbedieningen, die cirkelvormig en metallic zijn, willen we ook een slagschaduw, maar we willen ook dat de vorm zelf wordt weergegeven:
Dit belangrijkste verschil is hier, afgezien van de schaal van de schaduw, het blend-element, dat de oorspronkelijke vorm behoudt en ook de schaduw eromheen laat zien.
Dat is genoeg voorbereiding; laten we doorgaan met de graphics! Elk item dat u aan de hoofdtekst van de SVG toevoegt, wordt weergegeven bovenop eerder genoemde elementen, dus we werken van onder naar boven, te beginnen met de vormen aan de achterkant en eindigend met die aan de voorzijde.
Voeg eerst een rechthoekige vorm toe voor de achtergrond:
De rect elementafmetingen en -positie worden opgegeven ten opzichte van de bevattende SVG, die, als u zich dit herinnert, relatief is ten opzichte van de grootte van het bevattende element. We zullen dit later in JavaScript instellen. Waar mogelijk zullen we relatieve grootte- en positiewaarden gebruiken, zodat het volledige beeld plus animatie en interactie op verzoek kan opschalen. Merk op dat de elementvulling een van de gradiënten specificeert die we hebben gedefinieerd, gebruikmakend van zijn ID attribuut.
De volgende laag is de recordschaduw met behulp van een van de slagschaduwfilters die we hebben gemaakt:
De schaduw zal achter de plaat gaan liggen, als een cirkelvormige vorm met een straal die ruwweg een derde is van de ruimte die is toegewezen aan de afbeelding, geplaatst in het midden. Aangezien het filter in dit geval niet van toepassing is op de afbeelding, verschijnt de cirkel zelf niet, alleen de schaduw ervan.
Het volgende is het record zelf:
Net als bij de schaduw, de cx en cy attributen vertegenwoordigen het midden van het record, dat in het beeld horizontaal en verticaal gecentreerd is, met een straal van ongeveer een derde. Nogmaals, we gebruiken een van de gradiënten die we hebben gedefinieerd, wat we in elke vorm zullen doen.
Bovenop de plaat staat het label, dus voeg het volgende toe:
De etiketcirkel heeft hetzelfde centrale punt als het record, waarover het zich ongeveer een derde van de weg uitstrekt. We beginnen met de eerste van de labelverloopopties die we hebben gedefinieerd, en zullen de gebruiker implementeren die hier later tussen schakelt - we nemen hier een ID-kenmerk op om naar dit element in JavaScript te verwijzen.
Laten we nu eens wat schitteren bovenop het record:
Wanneer de plaat draait, beweegt hij naar rechts en een klein beetje naar beneden, dus we houden de glans iets kleiner dan de plaat zodat hij er niet verder uit ziet dan wanneer hij beweegt. Dit element heeft ook een ID-kenmerk om gebruikersinteractie te detecteren.
Laten we voor de volledigheid een kleine spil toevoegen in het midden van het record:
Deze vorm gebruikt de metalen gradient die we hebben gemaakt. We passen ook het tweede slagschaduwfilter toe, inclusief het mengen, zodat zowel de vorm als de schaduw verschijnen.
Last but not least hebben we een knopje nodig voor gebruikers om het wijzigen van het record te regelen, met dezelfde vulling en filter als de spil:
Deze keer scheiden we in plaats van een zelfsluitend element de openende en sluitende cirkeltags. Dit komt omdat we de knop gaan animeren wanneer gebruikers erop klikken en het animatie-effect tussen deze tags zal bevatten. Merk op dat we vul- en filterelementen van de. Hergebruiken defs sectie. Dit is het begin van de afbeelding zodra de paginadimensies op hun plaats zijn:
Elk item dat u aan de hoofdtekst van de SVG toevoegt, wordt boven de eerder weergegeven elementen weergegeven.
Nu hebben we onze visuele elementen op hun plaats, laten we wat animatie toevoegen. We kunnen het record laten draaien met behulp van SVG-animatietransformaties, die een uitbreiding zijn van SMIL-animatie. Deze geanimeerde effecten worden gedefinieerd in de SVG-markup. Een effect is van toepassing op het SVG-element waar het in voorkomt. U kunt CSS3-transformaties gebruiken op SVG-elementen, maar de SMIL-gebaseerde alternatieven geven u meer controle.
We gaan twee eenvoudige animaties toevoegen: het record gaat draaien en de knop zal een beetje bewegen wanneer de gebruiker erop klikt. Laten we beginnen met de iets rechtlijniger animatie voor de knop.
Binnen het vormelement van de knop, tussen de openende en sluitende cirkeltags die we hebben gemaakt, voegt u de animale transformatie toe als volgt:
De animateTransform is van toepassing op een XML-kenmerk binnen het element waarin het wordt weergegeven. In dit geval is het een vertaaltransformatie. De van en naar attributen vertegenwoordigen de start- en eindposities voor het element - deze zijn relatief ten opzichte van de startpositie, dus de knop gaat naar rechts en naar beneden met een enkele pixel. De transformatie begint wanneer een gebruiker klikt, langer dan een tiende van een seconde overschrijdt en eenmaal uitvoert. De knop keert terug naar de oorspronkelijke positie wanneer de animatie is voltooid. Tip: als u een element in de eindpositie wilt behouden na een animatie, geeft u op vullen = "bevriezen".
Nu voor het draaien van het record. Een animateTransform is van toepassing op een SVG-element, maar we hebben de spin nodig om op meer dan één element toe te passen - specifiek op het record en het label (niet op de glans of schaduw). In plaats van afzonderlijke animaties voor elk te maken en ze tegelijkertijd uit te voeren, kunnen we een enkele transformatie gebruiken door deze elementen samen te groeperen. Voordat het cirkelelement dat de record vertegenwoordigt (met "recordGrad" als vulling) een openingsgroeptag toevoegt:
Na de cirkel die het label vertegenwoordigt, sluit u de groep:
Voeg nu de transformatie toe vóór deze afsluitende groepstag, zodat deze van toepassing is op de hele groep:
Deze keer is het geanimeerde effect een roterende transformatie. Het element zal 360 graden ronddraaien en, om aan het effect toe te voegen, zal het naar rechts en naar beneden worden verplaatst door een enkele pixel bij elke rotatie, gedurende een periode van één seconde, en dit voor onbepaalde tijd herhalen. Deze transformatie bevat ook een van attribuut, omdat het nodig is om de beginpositie van de elementen die worden geroteerd te specificeren. Als u deze positie niet opgeeft, roteren de elementen rond de 0, 0 punt standaard. Op dit moment kunt u echter geen relatieve (d.w.z. percentage) waarden aan deze kenmerken toevoegen, alleen vaste waarden. Om deze reden gaan we het instellen van attribuut wanneer we de SVG-dimensies in JavaScript opgeven.
Laten we nu onze interactieve functies implementeren: op de knop klikken om het record te wijzigen en op het record te drukken om het te vertragen.
Voeg eerst in het scriptgedeelte van uw paginakop deze variabelen toe om te tellen en de labelontwerpen bij te houden:
// houd het huidige recordlabel in de gaten var currLabel = 0; // verander dit voor een ander aantal labels var numLabels = 3;
Typ nu de volgende klikgebeurtenislist binnen de openingstag voor het cirkelelement dat de knop vertegenwoordigt (die nu een animatie heeft tussen de tags):
onclick = "changeRecord ()"
Terug in het head-scriptgedeelte, voeg de functieomtrek toe:
function changeRecord ()
Telkens wanneer de gebruiker op de knop drukt, gaan we naar het volgende label en gaan we terug naar de eerste wanneer we de laatste bereiken:
Accentsconagua
// ga naar het volgende label currLabel ++; // reset als op het hoogste aantal if (currLabel> numLabels - 1) currLabel = 0; // stel het vulkenmerk in op het volgende verloop document.getElementById ("recordLabel"). setAttribute ("fill", "url (#labelGrad" + currLabel + ")"); De laatste regel hier laat zien hoe u kunt communiceren met de SVG-elementen met behulp van DOM-technieken, net als met andere webpagina-elementen. Hier hebben we de vullen kenmerk van het labelcirkelelement om de volgende verloopvulling te gebruiken, waarbij de vul-ID wordt opgegeven.
Voeg nu de volgende event-attributen toe aan het record shine-element (met "shineGrad" als zijn vulling), omdat we er muis-omhoog en omhoog-events op gebruiken om het vertragen van de record te vertragen en het opnieuw te versnellen:
onmousedown = "onRecord ()" onmouseup = "offRecord ()"
Terug in de scriptsectie, voeg de functie toe voor wanneer een gebruiker op de record drukt:
// functie die wordt aangeroepen wanneer gebruiker op recordfunctie onRecord () drukt
Binnen deze functie kunnen we de record-draaiende animatie vertragen door de animateTransform duur attribuut. We passen ook de glansdekking aan om de indruk te wekken van drukken:
// vertraag de animatieduur document.getElementById ("spinTrans"). setAttribute ("dur", "5s"); // verminder de glansdekking document.getElementById ("shine"). style.opacity = "0.7"; Wanneer de gebruiker het record vrijgeeft, willen we dat het teruggaat naar de normale snelheid en het uiterlijk, dus voeg de volgende functie toe met de muis omhoog:
// functie die wordt aangeroepen wanneer de gebruiker de opnamefunctie offRecord () // reset naar normale snelheid document.getElementById ("spinTrans"). setAttribute ("dur", "1s"); // zet de dekking terug naar normaal document.getElementById ("shine"). style.opacity = "1.0"; We kunnen nu eindelijk de totale grootte van de SVG instellen. Voeg een nieuwe variabele toe boven aan de scriptsectie:
// gewenste grootte van SVG var-afmeting = 300;
We zullen in eerste instantie gebruiken 300 pixels voor zowel de breedte als de hoogte van de afbeelding, maar u kunt dit op elk gewenst moment wijzigen. Definieer een functie in de scriptsectie om deze dimensies in te stellen:
// functie om SVG-dimensies in te stellen functie setSize () // set css en transform size var holder = document.getElementById ("picHolder"); holder.style.height size = + "px"; holder.style.width size = + "px"; document.getElementById ("spinTrans"). setAttribute ("from", "0," + size / 2 + "," + size / 2 + ""); We hebben de grootte ingesteld op de bevattende div element. Neem even de tijd om naar de laatste regel in deze functie te kijken. Omdat de rotatietransformatie-animatie geen relatieve percentagewaarden kan gebruiken, moeten we de van element met de groottevariabele (gedeeld door twee voor het centrale punt van het record). Met 300 als de SVG-grootte, is dit de manier waarop de transformatie zou worden weergegeven met vaste waarden:
Als u vaste waarden in uw SVG wilt gebruiken, kunt u dat doen. We gebruiken deze techniek alleen om te demonstreren met behulp van relatieve dimensies. Bel uiteindelijk deze functie aan het einde van het scriptgedeelte:
window.addEventListener ("DOMContentLoaded", setSize, false); Onze interactieve SVG-animatie is nu voltooid! Open uw pagina in een ondersteunende browser om het effect te bekijken; vergeet niet om interactie met het record en de knop te proberen. Probeer de groottevariabele te wijzigen om te zien hoe de SVG-elementen zich allemaal aanpassen, inclusief de animaties en interacties.
Als u SVG verder wilt verkennen, kunt u een aantal onderwerpen overwegen, zoals paden, tekst, maskeren en knippen. Er zijn ook een aantal aanvullende animatie-opties om te overwegen. Natuurlijk werken deze effecten op dit moment niet voor alle gebruikers, maar hopelijk op een dag binnenkort ...
