Une analyse approfondie des techniques du didacticiel SVG_html5 en HTML5

Fond SVG

SVG est l'abréviation de Scalable Vector Graphics, qui signifie graphiques vectoriels évolutifs. En 1998, le World Wide Web Consortium a créé un groupe de travail pour développer une technologie permettant d'exprimer des graphiques vectoriels via XML - SVG ! Puisque SVG est également un fichier XML, SVG hérite également des avantages de l'ouverture, de la portabilité et de l'interactivité du XML. De nos jours, presque tous les principaux navigateurs prennent en charge SVG. Vous pouvez obtenir plus d'informations sur la compatibilité ici, notamment :

. Utilisez les éléments ou pour afficher les graphiques SVG de base ; Utilisez pour afficher les graphiques SVG ; Utilisez directement les éléments SVG ; dans les documents HTML (nécessite la prise en charge de HTML5) ; Utilisez des transformations SVG, des filtres et d'autres effets spéciaux sur les éléments HTML qui utilisent des éléments CSS ou des objets externes ; Utilisez des effets de type Photoshop sur les objets SVG ; flou et manipulation des couleurs ; Utiliser des animations avec des images SVG ; Utiliser des polices au format SVG ; * SVG

* Contenu de base * SVG n'est pas un contenu exclusif de HTML5 * HTML5 fournit du contenu natif sur SVG * Avant l'émergence du HTML5, il y avait du contenu SVG * SVG, tout simplement, est une image vectorielle * L'extension du fichier SVG est ".svg" * SVG utilise la syntaxe XML * Concept * SVG est une description utilisant la technologie XML Le langage de graphiques bidimensionnels * Caractéristiques du SVG * Les graphiques dessinés SVG peuvent être explorés par les moteurs de recherche * Le SVG peut être agrandi sans réduire la qualité de l'image * La différence entre SVG et Canvas * SVG * Ne dépend pas de la résolution * Prend en charge la liaison d'événements * Programmes avec de grandes zones de rendu (tels que Baidu Maps) * Ne peut pas être utilisé pour implémenter des jeux Web * Canvas * Dépend de la résolution * Ne prend pas en charge la liaison d'événements * Idéal pour les jeux Web * Enregistrez les images au format ".jpg" * Utilisation * Quelques petits fichiers sur les pages Web Icônes * Effets spéciaux dynamiques (effets d'animation) dans les pages Web * Utiliser SVG en HTML5 * Utiliser les éléments * Fonction - similaire à éléments * La taille par défaut est 300px*150px * Utilisez le style CSS * Utilisez SVG pour dessiner des graphiques, vous devez définir l'élément >* Élément rectangulaire

Copiez le code

Le code est le suivant : SVG dessine un rectangle &lt ;!-- Si vous utilisez la balise svg dans une page HTML * Définissez l'élément * Semblable au rôle de l'élément > * Taille par défaut 300px * 150px * Définir la largeur et la hauteur - attributs et style * Tous les graphiques dessinés à l'aide de SVG doivent être définis dans l'élément * Les graphiques dessinés à l'aide de SVG sont liés au HTML. pages --> Dessinez un rectangle - * x et y - coordonnées du coin supérieur gauche du rectangle dessiné * largeur et hauteur - largeur et hauteur du rectangle dessiné * Doit utiliser des attributs, pas du style * La couleur par défaut est le noir Définir la couleur - vous pouvez utiliser des attributs ou des styles * remplissage - définir la couleur de remplissage * trait - définir la couleur du trait définir la largeur de la ligne * largeur du trait Remarque * Pour les graphiques dessinés par svg, utilisez la méthode de style pour définir le style Au lieu d'utiliser les attributs CSS, vous utilisez les attributs SVG --> * Élément de cercle Dessinez un cercle - * cx et cy - la valeur des coordonnées circulaires du cercle * r - le rayon du cercle --> * Élément Ellipse * Élément de ligne ne peut contenir qu'un seul élément graphique, ou peut-il contenir plusieurs éléments graphiques ? * Peut contenir plusieurs éléments graphiques --> &lt ;/ body> * Élément polyligne Élément - Polyligne * points - Définissez le point de départ, le sommet et le point final * Utilisez "," pour séparer x et y * Utiliser entre plusieurs points Espacement séparé Caractéristiques de la polyligne * La zone dans la polyligne (du point de départ au point final) est fournie en noir par défaut --> * Polygonal élément * Éléments d'effets spéciaux * Dégradé - l'élément de dégradé est défini dans l'élément * Dégradé linéaire - * Cet élément est l'élément de départ Définir le dégradé linéaire - * Utilisation - Définissez le dégradé dans &lt ;defs> dans l'élément * Caractéristiques - a une ligne de base * Valeur de coordonnée du point de départ - x1 et y1 * Valeur de coordonnée du point d'arrivée - x2 et y2 * Remarque * Cet élément est l'élément de départ * Les valeurs de x1 et y1, x2 et y2 sont toutes des pourcentages * Définir l'attribut id * Utilisé pour ajouter le dégradé défini au graphique dessiné element Medium * Utilisez l'élément - définissez la couleur du dégradé * offset - définissez la position de la couleur du dégradé * La valeur est également un pourcentage * stop-color - définir la couleur du dégradé * stop-opacity - Définir la transparence de la couleur du dégradé --> Comment définir le dégradé linéaire ci-dessus et l'ajouter au rectangle ci-dessous * Utilisez l'attribut fill, la valeur est url (valeur #id de l'élément dégradé) --> * Secteur (Ray) Gradient- * Filtre-Flou gaussien * Le filtre utilise l'élément * Element-Flou gaussien * dans ="SourceGraphic" * stdDeviation - Définir le niveau de flou

Copier le code Le code est le suivant : Comment définir le filtre de flou gaussien * Définir l'élément le filtre est défini dans Dans cet élément * Définir l'élément - un filtre représentant SVG * Définir l'élément Flou gaussien * Attribut * dans ="SourceGraphic" - Écriture fixe * stdDeviation - Définir le degré de flou * Définir la valeur de l'attribut id pour l'élément * Idéalement ajouté aux éléments qui dessinent des graphiques -- > Comment associer le flou gaussien du dessus aux éléments du dessous * Utilisez l'attribut filter, la valeur est url(#id) * Définissez le filtre du graphique actuel - -> &lt ;/svg> * Remarque - définie dans l'élément * TWO.js * Contenu de base * Introduction à la bibliothèque JS * three.js - spécifiquement utilisé Pour dessiner des graphiques en trois dimensions * two.js - spécifiquement pour dessiner des graphiques en deux dimensions * formats pris en charge par two.js * SVG - par défaut * Canvas * WebGL - spécifiquement pour Dessiner une image * Comment utiliser two.js * Introduire le fichier two.js dans la page HTML * Définir le conteneur ( ) dans la page HTML * En code javascript * Récupérez le conteneur dans la page HTML * Créez un objet Two et ajoutez l'objet au conteneur new Two(params).appendTo(Element); * Utilisez la méthode API fournie par two. js Draw * Utilisez la méthode fournie par two.js pour définir les graphiques * Utilisez la méthode update() pour dessiner * Créez un objet Two * Constructeur - new Two(params) * params Paramètres - Définir les informations de l'objet actuel * type - Définir le format actuellement utilisé (Two.Types.svg) * svg - Valeur par défaut * canvas * webgl * width and height - Définir la largeur et la hauteur * fullscreen - Définir s'il faut être en plein écran * Valeur booléenne, true signifie plein écran * Méthode graphique * makeLine() - Dessiner un line * makeRectangle() - Dessine un rectangle * makeCircle() - Dessine un cercle * makeEllipse() - Dessine une ellipse * Méthode d'animation * update() - Mettre à jour l'animation * play() - Ajouter une animation (boucle) * pause() - Supprimer l'animation * Définir le style de dessin des graphiques * Lors de l'appel de la méthode de dessin de deux objets pour dessiner des graphiques, retournez l'objet graphique * Définir les valeurs des attributs associés via cet objet graphique * Opération de regroupement * Two.Group * Effet d'animation * Méthode bind(event,callback) - liaison d'événement * événement - nom de l'événement de liaison * mise à jour - fonction correspondante de la méthode update() * Tous les événements DOM peuvent être liés * rappel - fonction de gestion des événements * contenu étendu * Outil de développement front-end * Aptana Studio 3 - Conseils de code * Webstrom - Artefact de développeur front-end national * Développement réel * SVG multi-usage * Aucune distorsion * Consultable * Optimisation de la page - réduction des liens externes * * * Canvas - Graphiques de dessin HTML * En fonctionnement réel, il apparaît sous la forme d'une image (.png) * Ne peut pas être exploré par les moteurs de recherche * Distorsion après grossissement * Contenu SVG * Très grande quantité de contenu * Graphiques dessinés statiques * Effets d'animation dynamiques * Événements spécialisés fournis * Il y a très peu d'informations sur SVG sur Internet (pas de livres) * Spécification SVG (anglais W3C) * SVG ou CANVAS est défini dans la page HTML * Un seul élément peut être défini, ou plusieurs éléments peuvent-ils être définis ? * Plusieurs éléments ou 🎜>* SVG et CANVAS permettent de définir (dessiner) plusieurs graphiques en même temps * Utilisation dans le développement réel * Le taux d'utilisation de SVG dans le développement de travaux futurs n'est pas élevé * Images SVG sont généralement réalisés par les concepteurs d'interface utilisateur * Même si SVG est conçu par nous-mêmes (Dessin) * Il existe de nombreux sites Web sur Internet qui fournissent des images SVG prêtes à l'emploi * Utilisation de la bibliothèque JS

-------------------------------------------------------------- --- ---------------------------------------------> Changez pour le bien de la vie, créez pour le bien du changement.

Une analyse approfondie des techniques du didacticiel SVG_html5 en HTML5

Articles Liés