Share
SVG is op weg om een belangrijk onderdeel te zijn van webontwikkeling en -ontwerp. SVG begrijpen en het kunnen weergeven van uw vaardigheden wordt steeds belangrijker.
In de tutorial van vandaag beantwoorden we een specifiek verzoek van een Tuts + -lezer. We gaan een tool bekijken in Adobe Illustrator die helpt bij het maken van SVG-interactiviteit met JavaScript. Het wordt genoemd - wacht erop-Het SVG-interactiviteitspaneel.
Ik zal iedereen een uitgebreid gedetailleerde wandeling besparen van wat eigenlijk een ineffectief hulpmiddel is. Ik zal het niet bespreken variabelen tab omdat ik er echt niet veel gebruik van zie en (naar mijn mening) is het veel verstandiger om vanuit je project zelf JavaScript te schrijven over het gebruik van het interactiviteitspaneel.
Ik zal ook niet door de koppeling van externe JavaScript-bestanden lopen, maar je kunt de dingen altijd nader bekijken op een later tijdstip na het lezen van het doel van dit panel.
Begin met het selecteren van een object op het kunstboard of het richten van een item in het Lagen palet (zie Het uiterlijk van illustraties wijzigen met behulp van het palet Lagen voor meer informatie hierover.)
Targeting via het deelvenster LagenGa naar Venster> Interactiviteit van SVG.
Nu moeten we een evenement toevoegen aan ons object. Deze gebeurtenis bepaalt de omstandigheden waaronder onze JavaScript-code van kracht wordt. Kies een gebeurtenis in het palet SVG Interactiviteit Evenement selecteer menu. Hier heb ik gekozen onmouseover:
Geef in het tekstvak JavaScript een JavaScript-opdracht op die wordt geactiveerd door de geselecteerde gebeurtenis. In dit geval hebben we toegevoegd:
alert ( "hallo");
druk op invoeren om het item aan de evenementenlijst toe te voegen.
Nadat de gebeurtenis is gemaakt, gebruikt Illustrator uw geselecteerde doel (in dit geval mijn groepselement dat bekend staat als de g tag) en pas JavaScript inline toe. Als u uw object kopieert en rechtstreeks in een teksteditor plakt, krijgt u de XML voor dat object. Het ziet er ongeveer zo uit:
Zoals je kunt zien in de XML-uitvoer, zijn de gebeurtenislistener en -handler voor ons inline ingedeeld. Wanneer u nu de SVG in een browser opent en u zweeft over de SVG, ziet u een waarschuwing met het woord 'hallo'.
Notitie: houd er rekening mee dat ik Niet doen onderschrijven het gebruik van inline JavaScript voor alles, tenzij absoluut noodzakelijk!
Klik in het palet SVG Interactiviteit op een JavaScript-gebeurtenis om deze te markeren. Kies de prullenbak rechtsonder in het paletmenu SVG-interactiviteit.
Dat is het! Zoals we hebben gezien, biedt het SVG-interactiviteitspalet ontwerpers de mogelijkheid om direct vanuit Illustrator interactieprogrammering toe te voegen. Nogmaals, ik zou wegblijven van deze tool tenzij je absoluut reden hebt om het te gebruiken. Blijf bij het schrijven van JavaScript vanuit uw project, in plaats van rechtstreeks in Illustrator.
Accentsconagua