1. Rencontrez SVG et première expérience
Qu'est-ce que le SVG
Le nom complet de SVG est (Scalable Vector Graphics), ce qui signifie graphiques vectoriels évolutifs. (Définition de vecteur : une quantité avec à la fois une magnitude et une direction. C'est ce qu'on appelle un vecteur en physique, comme un segment de ligne avec une flèche : la longueur indique la taille et la flèche indique la direction ; c'est ce qu'on appelle un vecteur en mathématiques. Dans l'ordinateur, le diagramme vectoriel peut être illimité Zoom avant sans déformation)
SVG est un diagramme vectoriel basé sur le format XML, principalement utilisé pour définir des graphiques en deux dimensions, et prend en charge l'interaction et l'animation.
La spécification SVG est une norme développée depuis 1998 par le World Wide Web Consortium (W3C).
Les images SVG peuvent être redimensionnées sans perte de qualité et prennent en charge la compression.
SVG basé sur XML peut être facilement créé et modifié avec un éditeur de texte ou un éditeur de graphiques vectoriels, et peut être affiché directement dans le navigateur
Compatibilité SVG avec les navigateurs :
Histoire SVG
◼ Version SVG1.x
SVG a été développé par le groupe de travail W3CSVG en 1998, et SVG 1.0 est devenu la norme recommandée par le W3C le 4 septembre 2001.
SVG 1.1 est devenu une norme recommandée par le W3C le 14 janvier 2003. Cette édition ajoute du contenu à la spécification modulaire. En dehors de cela, il y a peu de différence entre 1.1 et 1.0.
SVG Tiny 1.2 est devenu une recommandation du W3C le 22 décembre 2008, principalement pour générer des graphiques pour les petits appareils à faible performance, mais a ensuite été déprécié par SVG 2.
La deuxième version de SVG 1.1 est sortie le 16 août 2011. Cette fois, elle ne mettait à jour que les errata et les instructions, et n'ajoutait pas de nouvelles fonctions.
◼ Version SVG2.0 (recommandée)
SVG 2.0 est devenu une recommandation candidate du W3C le 15 septembre 2016 et la dernière version a été publiée le 26 mai 2020.
Changement de SVG2.x à partir de SVG1.x ( https://www.w3.org/TR/SVG/changes.html), tel que :
✓ Suppression des attributs de profil de base et de version de l'élément « svg ».
✓ Ajout de la possibilité d'utiliser « auto ». pour lesattributswidthanheightsur'image'.
✓ Ajout de l'attribut'lang' sur les éléments'desc'et'title'.
✓ Suppression des'xlink:type','xlink:role','xlink:arcrole','xlink:show'and' Attributs xlink :actuate
✓ Dépréciation de l'attribut 'xlink:href' au profit de l'utilisation de 'href'sans espace de noms.
Avantages du SVG
◼ Bonne extension : les images vectorielles peuvent être agrandies et dézoomées dans les navigateurs sans distorsion, et peuvent être utilisées dans de nombreux appareils et navigateurs. Les images raster (PNG, JPG) seront déformées lors d'un zoom avant et arrière.
Les images vectorielles sont des graphiques construits à partir de points vectoriels, de lignes, de formes et de formules mathématiques. Les graphiques n'ont pas de pixels et ne seront pas déformés lors d'un zoom avant ou arrière.
Une image tramée est une image construite à partir de pixels, c'est-à-dire de minuscules carrés colorés avec un grand nombre de pixels qui peuvent former une image haute définition, telle qu'une photographie. Plus il y a de pixels dans une image, meilleure est la qualité.
◼ Flexible : SVG est un standard développé par le W3C et peut être utilisé en combinaison avec d'autres langages et technologies, notamment CSS, JavaScript, HTML et SMIL. Les images SVG peuvent être manipulées directement à l'aide de JS et CSS, ce qui est très pratique et flexible à utiliser, car SVG peut également être intégré dans DOM.
◼ Animable : les images SVG peuvent être animées à l'aide de JS, CSS et SMIL. Très convivial pour les développeurs Web.
◼ Léger : les images SVG sont de très petite taille par rapport aux autres formats. Selon l'image, les images PNG peuvent avoir une qualité 50 fois supérieure à celle des images SVG.
◼ Imprimable : les images SVG peuvent être imprimées à n'importe quelle résolution sans perte de qualité d'image.
◼ Bon pour le référencement : les images SVG sont indexées par les moteurs de recherche. Par conséquent, les images SVG sont idéales à des fins de SEO (Search Engine Optimization).
◼ Compressible : comme les autres formats d'image, les fichiers SVG prennent en charge la compression.
◼ Facilité d'édition : les images SVG peuvent être créées avec un simple éditeur de texte. Les concepteurs créent et modifient généralement à l'aide d'outils graphiques vectoriels tels qu'Adobe Illustrator (AI).
Inconvénients SVG
◼ Inconfort et production d'images HD
Le format SVG est idéal pour les graphiques 2D comme les logos et les icônes (ICÔNES), mais pas pour les images HD et la manipulation au niveau des pixels.
Les images SVG ne peuvent pas afficher autant de détails que les formats d'image standard car elles sont rendues à l'aide de points et de chemins au lieu de pixels.
◼ Les images SVG se chargent lentement lorsqu'elles deviennent complexes
◼ Pas entièrement extensibles à la plate-forme
Bien que SVG existe depuis 1998 et soit pris en charge par la plupart des navigateurs modernes (ordinateurs de bureau et mobiles), il ne fonctionne pas pour les navigateurs Legacy IE8 et inférieurs. Selon les données de caniuse, environ 5 % des utilisateurs utilisent des navigateurs qui ne prennent pas en charge SVG.
Scénarios d'application SVG
◼ Quels sont les scénarios d'application de SVG ? Voici quelques scénarios d'application qui justifient la supériorité de SVG sur les autres formats d'image :
SVG est idéal pour afficher des logos vectoriels (Logos), des icônes (ICÔNES) et d'autres motifs géométriques.
SVG convient aux applications qui doivent être affichées sur des écrans qui doivent s'adapter à plusieurs tailles, car SVG a une meilleure évolutivité.
SVG est un format idéal lorsqu'il s'agit de créer des animations simples.
✓ SVG peut être interagi avec JS pour créer des animations de ligne, des transitions et d'autres animations complexes.
✓ SVG peut interagir avec les animations CSS ou utiliser ses propres animations SMIL intégrées.
SVG convient également très bien à la création de divers graphiques (histogrammes, graphiques linéaires, camemberts, nuages de points, etc.), ainsi qu'au développement de pages visuelles sur grand écran.
La différence entre SVG et Canvas
◼ Évolutivité :
SVG est un graphique construit à partir de points vectoriels, de lignes, de formes et de formules mathématiques. Ce graphique n'a pas de pixels et ne sera pas déformé lors d'un zoom avant ou arrière.
Canvas est un graphique composé de pixels individuels, un zoom avant rendra le graphique granuleux et pixélisé (flou).
SVG peut être imprimé à n'importe quelle résolution avec une haute qualité. Canvas ne convient pas à l'impression à des résolutions arbitraires.
◼ Capacité de rendu :
Lorsque SVG est complexe, son rendu devient très lent, car lors de l'utilisation intensive de DOM, le rendu devient très lent.
Canvas offre un rendu hautes performances et des capacités de traitement graphique plus rapides, par exemple : adapté à la création de petits jeux H5.
Lorsqu'une image contient beaucoup d'éléments, la taille du fichier SVG augmente plus rapidement (ce qui rend le DOM complexe), tandis que le Canvas n'augmente pas tant que ça.
◼ Flexibilité :
SVG peut être modifié via JavaScript et CSS, et il est très pratique d'utiliser SVG pour créer des animations et des effets spéciaux.
Canvas ne peut être modifié que via JavaScript, la création d'une animation nécessite un redessin image par image.
◼ Scénarios d'utilisation :
Canvas est principalement utilisé pour le développement de jeux, le dessin de graphismes, la composition de photos complexes et l'exécution d'opérations au niveau des pixels sur les images, telles que les sélecteurs de couleurs et les photos rétro.
SVG est idéal pour afficher des logos vectoriels (logos), des icônes (ICÔNES) et d'autres motifs géométriques.
Première expérience avec SVG
◼ Comment dessiner une image vectorielle SVG ? Il existe 4 façons courantes de dessiner des graphiques vectoriels SVG :
Méthode 1 : Dessiner dans un fichier svg séparé, le fichier svg peut être directement prévisualisé dans le navigateur ou intégré au format HTML (recommandé)
Méthode 2 : Utiliser directement dans le fichier HTML svg éléments à dessiner (recommandé)
Méthode 3 : Utiliser directement le code JavaScript pour générer des graphiques vectoriels svg.
Méthode 4 : Utilisez les outils de dessin vectoriel AI (Adobe IIIustractor) pour dessiner des graphiques vectoriels et les exporter sous forme de fichiers svg (recommandé) ◼
Première expérience SVG
Étape 1 : Créez un nouveau fichier svg et écrivez la déclaration de fichier XML dans la première ligne du
file Étape 2 : écrivez un élément <svg> et ajoutez les attributs suivants à l'élément :
✓ version : spécifiez la version de svg à utiliser, les valeurs sont 1.0 et 1.1, et il n'y a pas de 2.0.
✓ baseProfile : Avant SVG 2, les attributs version et baseProfile étaient utilisés pour vérifier et identifier la version SVG. Ces deux attributs ne sont pas recommandés après SVG2.
✓ width/height : Spécifiez la largeur et la hauteur du canevas svg (viewport), les valeurs par défaut sont respectivement 300 et 150, et l'unité px est utilisée par défaut.
✓ xmlns : Attribuer un espace de noms à l'élément svg (http://www.w3.org/2000/svg)
signifie que la balise <svg> et ses éléments enfants appartiennent tous à cet espace de noms.
Étape 3 : Ajoutez des éléments graphiques (par exemple : <rect>) dans l'élément <svg>
Étape 4 : Prévisualisez directement dans le navigateur ou intégrez-le dans HTML (il existe 6 options pour incorporer du HTML)
Déclarations XML et DTD
◼ Puisque SVG est un format de fichier XML. Lors de l'écriture de documents XML, il est généralement recommandé d'écrire des déclarations XML. Puisque les déclarations XML sont facultatives dans XML 1.0, leur écriture est recommandée mais pas obligatoire. Dans XML 1.1, cependant, les déclarations sont obligatoires et l'absence de déclaration implique automatiquement que le document est un document XML 1.0. Il est donc recommandé d'écrire également une déclaration XML lors de l'écriture de fichiers SVG.
◼ Format de déclaration XML de SVG : <?xml version="1.0" encoding="UTF-8" standalone="no" ?> version spécifie la version (obligatoire) encoding spécifie l'encodage du document XML (optionnel
,
le la valeur par défaut est UTF-8)
autonome : spécifie si le document XML actuel dépend de la déclaration de balise externe (facultatif, lors de l'utilisation de cet attribut, il n'a de sens que lorsqu'il est utilisé avec la déclaration DTD).
✓ La valeur par défaut est no : signifie s'appuyer sur des déclarations de balisage externes
✓ yes : signifie s'appuyer sur des déclarations de balisage internes par défaut
◼ Document Type Declaration (DTD) de SVG, qui permet à l'analyseur de vérifier si le fichier XML est conforme à la spécification, similaire à la déclaration DTD des fichiers HTML5.
Déclaration de DTD interne en XML (facultatif)
Déclaration de DTD externe en XML (facultatif)
<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Structure des documents SVG
◼ Structure du document SVG1.1 :
La première ligne : contient une déclaration XML. Comme le fichier SVG est au format XML, il doit contenir une déclaration XML.
La deuxième ligne : définir la déclaration de type de document (DTD), ici s'appuyer sur le type de document SVG1.1 externe, laisser l'analyseur vérifier si le fichier XML est conforme à la spécification.
<!DOCTYPE svgPUBLIC “-//W3C//DTD SVG 1.1//EN”"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
◼ Structure de document SVG2.0 :
Les attributs SVG2version et baseProfile ont été supprimés, et il n'est pas recommandé d'écrire une déclaration de type de document (DTD). dans
JS pour créer du SVG
◼ Lorsque vous utilisez des scripts JS pour créer du SVG, tous les éléments créés doivent ajouter un espace de noms.
Par exemple : Pour créer des éléments <svg> ou <rect>, vous devez ajouter un espace de noms (http://www.w3.org/2000/svg)
Si l'attribut de l'élément n'a pas de préfixe, le l'affectation de l'espace de noms est nulle.
◼ Parce qu'il est suggéré dans la spécification d'espace de noms XML1.1 que le nom de l'espace de noms sans attribut de préfixe (avec le préfixe xlink:href) n'a pas de valeur, et la valeur de l'espace de noms doit utiliser une valeur nulle.
◼ Créer DOM2API couramment utilisé dans SVG :
createElementNS (ns, elname) : créer des éléments SVG
setAttributeNS (ns, attrname, value) : ajouter des attributs aux éléments SVG
getAttributeNS (ns, attrname) : obtenir des attributs sur les éléments SVG
hasAttributeNS ( ns, attrname) : détermine si un attribut existe sur un élément SVG
removeAttributeNS (ns, attname) : supprime un attribut sur un élément SVG
Autres API : https://developer.mozilla.org/zh-CN/ docs/Web /SVG/Namespaces_Crash_Course
HTML en SVG
◼ Méthode 1 : L'élément img
est utilisé comme image, ne prend pas en charge l'interaction et n'est compatible qu'avec ie9 et supérieur ◼
Méthode 2 : CSS background
est utilisé comme image d'arrière-plan, ne prend pas en charge l'interaction ◼
Méthode 3 : Directement citer le fichier source dans le fichier HTML
En tant qu'élément DOM de HTML, il prend en charge l'interaction et n'est compatible qu'avec ie9 et supérieur◼
Méthode 4 : élément objet (comprendre).
Prend en charge le svg interactif, peut obtenir une référence d'objet, définir une animation pour SVG, modifier sa feuille de style, etc.
◼ Méthode 5 : élément iframe (comprendre).
Prend en charge le svg interactif, peut obtenir une référence iframe, définir une animation pour SVG, modifier sa feuille de style, etc.
◼ Méthode 6 : intégrer un élément (comprendre).
Prend en charge le svg interactif, peut obtenir une référence d'intégration, définir une animation pour SVG, modifier sa feuille de style, etc., et avoir un meilleur support pour les anciens navigateurs.
2. Grille et système de coordonnées
Grille et systèmes de coordonnées SVG
◼ Le système de coordonnées (système de grille) utilisé par SVG est similaire à celui de Canvas. Le système de coordonnées prend le coin supérieur gauche comme origine des coordonnées (0,0), les coordonnées sont en pixels, la direction positive de l'axe des x est vers la droite et la direction positive de l'axe des y est vers le bas.
◼ Grille SVG (système de coordonnées)
La largeur par défaut de l'élément <svg> est de 300px et la hauteur est de 150px. Comme indiqué à droite, l'élément <svg> est couvert par une grille par défaut.
De manière générale, une cellule de la grille équivaut à un pixel de l'élément svg.
Fondamentalement, 1 pixel dans le document SVG correspond à 1 pixel sur le périphérique de sortie (par exemple, l'affichage) (sauf s'il est mis à l'échelle).
L'élément <svg> a un espace de coordonnées comme les autres éléments, et son origine est située dans le coin supérieur gauche de l'élément, qui est appelé le système de coordonnées initial de la fenêtre L'attribut transform de <svg> peut être utilisé pour déplacer, faire pivoter et
mettre à l'échelle des objets dans SVG Un élément, tel qu'un élément dans <svg> qui utilise la déformation, établira un nouveau système de coordonnées à l'intérieur de l'élément, et l'élément par défaut que toutes les modifications ultérieures sont basées sur le système de coordonnées nouvellement créé.
Unités du système de coordonnées SVG
◼ Système de coordonnées SVG, lorsque l'unité n'est pas spécifiée explicitement, l'unité par défaut est le pixel.
◼ Par exemple : <rect x="0" y="0" width="100" height="100" />
Définissez un rectangle, c'est-à-dire qu'il commence par le coin supérieur gauche, s'étend de 100 px vers la droite et étendez 100px vers le bas pour former un grand rectangle de 100*100.
◼ Bien sûr, nous pouvons également spécifier manuellement l'unité du système de coordonnées, par exemple :
3. Fenêtre et cadre de vue
fenêtre - fenêtre
◼ Viewport
Le viewport est la zone visible du SVG (ou la taille du canevas SVG). Les fenêtres peuvent être considérées comme des fenêtres à travers lesquelles vous pouvez voir une scène spécifique.
Vous pouvez utiliser les attributs width et height de l'élément <svg> pour spécifier la taille de la fenêtre d'affichage.
Une fois la largeur et la hauteur de l'élément SVG le plus à l'extérieur définies, le navigateur établit le système de coordonnées initial de la fenêtre d'affichage et le système de coordonnées utilisateur initial.
◼ Système de coordonnées de la fenêtre
Le système de coordonnées de la fenêtre est un système de coordonnées établi sur la fenêtre. L'origine est au point (0, 0) dans le coin supérieur gauche de la fenêtre, l'axe des x est positif vers la droite et le l'axe y est positif vers le bas.
Une unité dans le système de coordonnées initial de la fenêtre est égale à un pixel dans la fenêtre, ce qui est similaire à celui des éléments HTML.
◼ Système de coordonnées utilisateur (également appelé système de coordonnées actuel ou espace utilisateur utilisé, et le dessin suivant fera référence à ce système de coordonnées)
Le système de coordonnées utilisateur est le système de coordonnées établi sur la fenêtre SVG. Ce système de coordonnées est initialement le même que le système de coordonnées de la fenêtre - son origine se trouve dans le coin supérieur gauche de la fenêtre.
À l'aide de la propriété viewBox, le système de coordonnées initial de l'utilisateur peut être modifié afin qu'il ne soit plus le même que le système de coordonnées de la fenêtre.
◼ Pourquoi y a-t-il deux systèmes de coordonnées ?
Étant donné que SVG est une image vectorielle, il prend en charge la mise à l'échelle arbitraire. Les graphiques dessinés dans le système de coordonnées utilisateur seront finalement mis à l'échelle proportionnellement par rapport au système de coordonnées de la fenêtre.
Boîte de visualisation - viewBox
◼ ViewBox (viewBox)
viewport est la taille du canevas SVG, et viewBox est utilisé pour définir la position et la taille dans le système de coordonnées utilisateur (la zone sera généralement mise à l'échelle pour remplir la fenêtre).
viewBox peut également être compris comme utilisé pour spécifier la taille du système de coordonnées utilisateur. Parce que les graphiques SVG sont tous dessinés dans cette zone. Le système de coordonnées utilisateur peut être plus petit ou plus grand que le système de coordonnées de la fenêtre et peut être entièrement ou partiellement visible dans la fenêtre.
Une fois le système de coordonnées de la fenêtre d'affichage créé (<svg> utilise la largeur et la hauteur), le navigateur crée un système de coordonnées utilisateur par défaut identique à celui-ci.
Nous pouvons utiliser la propriété viewBox pour spécifier la taille du système de coordonnées utilisateur.
✓ Si le système de coordonnées de l'utilisateur a le même rapport d'aspect que le système de coordonnées de la fenêtre, il étire la zone de la zone de visualisation pour remplir la zone de la fenêtre.
✓ Si le système de coordonnées utilisateur et le système de coordonnées de la fenêtre n'ont pas le même rapport d'aspect, la propriété preserveAspectRatio peut être utilisée pour spécifier si l'intégralité du système de coordonnées utilisateur est visible dans la fenêtre.
◼ syntaxe viewBox
viewBox = <min-x> <min-y> <width> <height>, par exemple : viewBox =' 0 0 100 100'
✓ <min-x> et <min-y> déterminent le coin supérieur gauche de la boîte de vue Coordonnées du coin (l'origine du système de coordonnées utilisateur n'est pas modifiée et le dessin commence toujours à partir du 0,0 d'origine)
✓ <width> <height> détermine la largeur et la hauteur de la boîte de vue.
➢ La largeur et la hauteur ne doivent pas nécessairement être les mêmes que celles définies sur l'élément parent <svg>.
➢ Les valeurs négatives pour la largeur et la hauteur ne sont pas valides, et 0 désactive l'affichage des éléments.
viewbox - viewBox - même rapport d'aspect
◼ Voir un exemple où le viewport et le viewBox ont le même ratio d'aspect :
✓ Réglez le viewbox à la moitié de la taille du viewport sur la propriété viewBox.
✓ Laissez le coin supérieur gauche de la fenêtre inchangé pour l'instant, réglez-le sur zéro.
✓ La largeur et la hauteur de la fenêtre seront égales à la moitié de la largeur et de la hauteur de la fenêtre.
◼ Alors, que fait exactement viewbox="0 0 100 100" ?
Spécifiez la zone affichable du canevas, le système de coordonnées utilisateur va du point supérieur gauche de (0, 0) au point de (100, 100) et l'unité par défaut est px.
Ensuite, dessinez les graphiques SVG dans la zone viewBox.
La zone viewBox est agrandie proportionnellement (zoom sans distorsion) pour remplir toute la fenêtre.
Le système de coordonnées utilisateur est mappé sur le système de coordonnées de la fenêtre, donc - dans ce cas - 1 unité utilisateur équivaut à 4 unités de la fenêtre.
Tout ce qui est dessiné sur le canevas SVG sera dessiné par rapport à ce système de coordonnées utilisateur.
viewbox - viewBox - différents rapports d'aspect
◼ Dans la fenêtre 400*400, que fait viewbox="0 0 200 100" ?
Les proportions de la viewBox sont conservées, mais la viewBox n'est pas étirée pour couvrir toute la zone de la fenêtre.
ViewBox viewBox est centré verticalement et horizontalement dans la fenêtre d'affichage.
◼ Que faire si vous souhaitez modifier la position du cadre de vue dans la fenêtre ?
Ajoutez l'attribut preserveAspectRatio à <\svg>, cet attribut permet de forcer un zoom uniforme viewBox viewBox
✓ preserveAspectRatio="none", force l'étirement des graphiques à remplir toute la fenêtre.
✓ preserveAspectRatio="xMinYMin", les graphiques sont affichés sur les axes minimum x et y du viewport
4. Dessinez des formes et des chemins
dessiner - rectangle (rect)
◼ Formes de base de
SVG Dans le canevas SVG, si vous souhaitez insérer une forme, vous pouvez créer un élément correspondant dans le document.
Différents éléments correspondent à différentes formes et différents attributs peuvent être utilisés pour définir la taille et la position des graphiques.
Les formes de base prises en charge par SVG sont : rectangle, cercle, ellipse, ligne, polyligne, polygone, chemin.
◼ Ensuite, utilisez SVG pour dessiner un rectangle (rect)
L'élément <rect> sera dessiné sur l'écran
L'élément <rect> a 6 attributs de base pour contrôler sa position et sa forme sur l'écran.
◼Les 6 attributs de base de l'élément <rect>
x : la position sur l'axe x du coin supérieur gauche du rectangle
y : la position sur l'axe y du coin supérieur gauche du rectangle
width : la largeur du rectangle
hauteur : la hauteur du rectangle
rx : l'orientation sur l'axe x des coins arrondis Le rayon de
ry : le rayon de l'orientation sur l'axe y du congé.
dessiner - cercle (cercle)
◼ Utilisez maintenant SVG pour dessiner un cercle (cercle)
L'élément <cercle> dessinera un cercle sur l'écran.
L'élément <circle> a 3 attributs de base pour définir le cercle.
◼Trois propriétés de base de l'élément <circle>
r : le rayon du cercle
cx : la position sur l'axe x du centre du cercle
cy : la position sur l'axe y du centre du cercle
Dessiner - ellipse (ellipse)
◼ Ensuite, utilisez SVG pour dessiner une ellipse (ellipse)
L'élément <ellipse> est une forme plus générale de l'élément <circle>, qui peut mettre à l'échelle le rayon x et le rayon y du cercle séparément.
rayon x et rayon y, les mathématiciens l'appellent généralement rayon d'axe majeur et rayon d'axe mineur
L'élément <ellipse> a 4 attributs de base pour définir l'ellipse.
◼ <ellipse> élément 4 propriétés de base
rx : rayon de l'axe x de l'ellipse
ry : rayon de l'axe y de l'ellipse
cx : position de l'axe x du centre de l'ellipse
cy : position de l'axe y du centre de l'ellipse
dessiner - cercle (cercle)
◼ Utilisez maintenant SVG pour dessiner un cercle (cercle)
L'élément <cercle> dessinera un cercle sur l'écran.
L'élément <circle> a 3 attributs de base pour définir le cercle.
◼ Trois attributs de base de l'élément <circle>
r : le rayon du cercle
cx : la position sur l'axe x du centre du cercle
cy : la position sur l'axe y du centre du cercle
Dessiner - ellipse (ellipse)
◼ Ensuite, utilisez SVG pour dessiner une ellipse (ellipse)
L'élément <ellipse> est une forme plus générale de l'élément <circle>, qui peut mettre à l'échelle le rayon x et le rayon y du cercle séparément.
rayon x et rayon y, les mathématiciens l'appellent généralement rayon d'axe majeur et rayon d'axe mineur
L'élément <ellipse> a 4 attributs de base pour définir l'ellipse.
◼ <ellipse> élément 4 propriétés de base
rx : rayon de l'axe x de l'ellipse
ry : rayon de l'axe y de l'ellipse
cx : position de l'axe x du centre de l'ellipse
cy : position de l'axe y du centre de l'ellipse
dessiner - ligne (ligne)
◼ Ensuite, utilisez SVG pour tracer une ligne droite (ligne)
L'élément <line> consiste à tracer une ligne droite. Il prend les positions de deux points comme attributs, spécifiant les positions de début et de fin de la ligne.
Il doit être tracé pour s'afficher, et il ne prend pas en charge le remplissage, qui est identique aux lignes Canvas.
L'élément <line> a 4 attributs de base pour définir la ligne.
◼ L'élément <line> a 4 attributs de base
x1 : la position sur l'axe x du point de départ
y1 : la position sur l'axe y du point de départ
x2 : la position sur l'axe x du point final
y2 : le y -position de l'axe du point final
Dessin - Polyligne (polyligne)
◼ Ensuite, utilisez SVG pour dessiner une ligne droite (polyligne)
L'élément <polyline> est un groupe de lignes droites connectées. Parce qu'elle peut avoir de nombreux points, toutes les positions des points de la polyligne sont placées dans une propriété de points.
Il sera rempli de noir par défaut
L'élément <polyline> a un attribut de base pour définir la position de tous les points de la polyligne.
◼ L'élément <polyline> a un attribut de base
points : séquence d'ensembles de points. Chaque nombre est séparé par des blancs, des virgules, des commandes de fin ou des retours à la ligne.
Chaque point doit contenir 2 nombres, l'un est la coordonnée x et l'autre est la coordonnée y.
Ainsi, les listes de points (0,0), (1,1) et (2,2) peuvent s'écrire comme suit : "0 0, 1 1, 2 2".
✓ Format de support : "0 0, 1 1, 2 2" ou "0, 0, 1, 1, 2, 2" ou "0 01 12 2"
Dessin - polygone (polygone)
◼ Ensuite, utilisez SVG pour dessiner des polygones (polygone)
Les éléments <polygone> sont très similaires aux polylignes, ils sont composés de lignes droites reliant un ensemble de points. La différence est que le chemin du <polygone> revient automatiquement du premier point au dernier point. A noter qu'un rectangle est aussi un polygone, et il est également possible de créer un rectangle à partir d'un polygone.
Il sera rempli de noir par défaut
L'élément <polygone> a un attribut de base utilisé pour définir la position de tous les points de la ligne du polygone.
◼ L'élément <polygon> a un attribut de base
points : séquence d'ensembles de points. Chaque nombre est séparé par des blancs, des virgules, des commandes de fin ou des retours à la ligne.
Chaque point doit contenir 2 nombres, l'un est la coordonnée x et l'autre est la coordonnée y.
Il est donc recommandé d'écrire les listes de points (0,0), (1,1) et (2,2) comme suit : "0 0, 1 1, 2 2".
La forme est fermée une fois le chemin tracé, de sorte que la ligne finale se connectera de la position (2,2) à la position (0,0).
dessiner - chemin (chemin)
◼ Utilisons SVG pour tracer des chemins
L'élément <chemin> est probablement la forme la plus courante en SVG. Vous pouvez utiliser l'élément <path> pour dessiner des rectangles (rectangles ou rectangles arrondis), des cercles, des ellipses, des polylignes, des polygones et d'autres formes, telles que des courbes de Bézier, des courbes quadratiques et d'autres courbes.
Il sera rempli de noir par défaut, et le chemin ne sera pas fermé par défaut
L'élément <path> a un attribut de base pour définir la position du point du chemin.
◼ <chemin> élément 1 attribut de base
d : un tableau d'ensemble de points et d'autres informations sur la façon de tracer le chemin, doivent commencer par la commande M.
✓ Il est donc recommandé d'écrire les listes de points (0,0), (1,1) et (2,2) comme ceci : "M0 0, 1 1, 2 2".
✓ Format de support : "M0 0, 1 1, 2 2" ou "M0 0, 1 1,2 2" ou "M0, 0, 1, 1, 2, 2" ou "M0 01 12 2"
Chemins et commandes SVG
◼ Les chemins SVG et les éléments nommés
<chemin> sont les formes SVG de base les plus puissantes. Vous pouvez l'utiliser pour créer des lignes, des courbes, des arcs et plus encore.
La forme de l'élément <path> est définie par l'attribut d, et la valeur de l'attribut d est une séquence de "commande + paramètre".
Chaque commande est représentée par une lettre clé. Par exemple, la lettre « M » représente la commande « Déplacer vers ». Lorsque l'analyseur lit cette commande, il sait que vous avez l'intention de vous déplacer jusqu'à un certain point. Après la lettre de commande se trouvent les coordonnées x et y du point vers lequel vous devez vous déplacer. Par exemple, la commande pour se déplacer vers le point (10,10) doit être écrite comme la commande "M 10 10". Une fois ce paragraphe de caractères terminé, l'analyseur lira le paragraphe de commandes suivant. Chaque commande a deux représentations, l'une consiste à utiliser des lettres majuscules, ce qui signifie un positionnement absolu. L'autre consiste à utiliser des lettres minuscules, indiquant le positionnement relatif (par exemple : à partir du point précédent, déplacer vers le haut de 10 px, déplacer vers la gauche de 7 px).
L'attribut d adopte le système de coordonnées utilisateur et n'a pas besoin d'indiquer l'unité.
◼ Commandes prises en charge par la valeur de propriété d
Commande Line
✓ M/m : MoveTo
✓ L/l : LineTo
✓ Z/z : Close Path
✓ H/h : horizontal
✓ V/v : vertical
Commande Curve
✓ C : Cubic Besser Curve
✓ S : courbe de Bézier cubique abrégée
✓ Q : courbe de Bézier quadratique
✓ T : courbe de Bézier quadratique abrégée
5. Dessinez du texte et des images
dessin
◼ Dessiner une image en SVG
Introduisez l'URL de l'image dans l'attribut href de l'élément <image>
◼ Remarque
L'élément image ne définit pas les valeurs x, y, elles sont automatiquement définies sur 0.
Lorsque la hauteur et la largeur de l'élément d'image ne sont pas définies, la valeur par défaut est la taille de l'image.
largeur et hauteur égales à 0, l'image ne sera pas présentée.
Les images externes doivent être référencées sur l'attribut href, et non sur l'attribut src.
Compatibilité des attributs href
dessiner-texte
◼ Voyons comment dessiner du texte sur le canevas SVG.
L'élément <text> est utilisé pour dessiner du texte dans un canevas SVG.
◼Attributs de base de l'élément <text>
Les attributs x et y déterminent la position d'affichage du texte dans le système de coordonnées utilisateur.
attribut text-anchor text flow direction, peut avoir une valeur start, middle, end ou inherit,
valeur par défaut start
◼Propriétés de la police de l'élément <text>
Une partie vitale du texte est la police dans laquelle il apparaît. SVG fournit certaines propriétés, similaires à CSS. Les propriétés suivantes peuvent être définies en tant que propriété SVG ou propriété CSS :
✓ font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter- espacement, espacement des mots et décoration du texte.
◼ Autres éléments liés au texte :
✓ Les propriétés x et y déterminent où le texte apparaîtra dans le système de coordonnées de la fenêtre.
✓ alignement-baseline Attributs d'alignement de la ligne de base : auto, baseline, middle, hanging, top, bottom..., la valeur par défaut est auto
Six, regroupement et multiplexage SVG
combinaison d'éléments (g)
◼ Composition d'éléments
L'élément <g> est un conteneur pour combiner des éléments.
La transformation ajoutée à l'élément g sera appliquée à tous ses éléments enfants.
La plupart des attributs ajoutés à l'élément g seront hérités par tous ses éléments enfants.
L'élément g peut également être utilisé pour définir des objets complexes, auxquels il est ensuite possible d'accéder via
Propriétés d'événement : onchange , onclick, ondblclick, ondrag…
Propriétés d'animation : transform
Plus
Réutilisation des éléments graphiques (defs)
◼ SVG nous permet de définir des éléments réutilisables.
Définissez les éléments réutilisables dans l'élément <defs>, puis passez
Introduire des éléments (utiliser)
◼L'élément <use> obtient les nœuds du document SVG et copie les nœuds obtenus à l'emplacement spécifié.
<use> équivaut à un clonage en profondeur du nœud DOM, un clonage à la position où se trouve l'élément use.
Les nœuds clonés sont invisibles lorsqu'ils sont donnés
Réutilisation des éléments graphiques (symboles)
◼ éléments <symbol> et
Sept, remplir et border
◼ Si vous souhaitez colorer les éléments en SVG, il existe généralement deux solutions :
La première méthode : utilisez directement les attributs des éléments, tels que : attributs fill (fill), stroke (stroke), etc.
La deuxième méthode : écrivez directement les styles CSS, car SVG est aussi un élément en HTML, et il prend également en charge les styles d'écriture avec CSS.
◼ La première méthode : utiliser directement les attributs de l'élément (remplissage et trait)
En SVG, la coloration de la plupart des éléments peut se faire grâce aux deux attributs de remplissage et de trait.
✓ propriété fill : définit la couleur de remplissage de l'objet. Prend en charge : nom de couleur, valeur hexadécimale, rgb, rgba.
✓ attribut trait : définit la couleur de la bordure de l'objet dessiné. Prend en charge : nom de couleur, valeur hexadécimale, rgb, rgba.
attribut de remplissage (fill)
◼ L'attribut fill est spécialement utilisé pour remplir les éléments en SVG avec de la couleur.
fill="couleur". Prise en charge : nom de la couleur, valeur hexadécimale, rgb, rgba, currentColor (hérite de la couleur de police de soi ou de la police parente).
◼ Remplissez le rectangle avec la couleur ci-dessous : fill="pink"
◼ Contrôlez l'opacité de la couleur de remplissage
fill-opacity="number", cette propriété est spécialement utilisée pour contrôler l'opacité de la couleur de remplissage, la valeur est 0 à 1.
Propriété de trait (trait)
◼ Attribut Stroke
stroke="color": Spécifie la couleur de remplissage de la bordure de l'élément.
stroke-opacity="number" : contrôle la transparence de la couleur de remplissage de la bordure de l'élément.
stroke-width="number" : spécifiez la largeur du trait. Notez que la bordure est dessinée avec le chemin comme ligne centrale.
stroke-linecap="butt|square|round" : contrôle le style des extrémités des bordures.
stroke-linejoin="miter|round|bevel": contrôle le style de la jonction de deux segments de ligne
stroke-dasharray="number[,number,….]" : applique le type tiret à la bordure.
✓ La valeur doit être un tableau de nombres séparés par des virgules, les espaces seront ignorés. Par exemple, 3, 5 :
➢ Le premier signifie que la longueur de la zone colorée est de 3
➢ Le second signifie que la longueur de la zone non colorée est de 5
stroke-dashoffset : spécifie le décalage du chemin en mode dasharray.
✓ La valeur est de type numéro, qui peut être positif ou négatif.
style css
◼ Écrivez directement des styles CSS pour obtenir un rembourrage et un contour
En plus de définir les attributs des éléments, vous pouvez également implémenter un rembourrage et des contours via CSS (les styles CSS peuvent être écrits dans defs, ou dans la tête de HTML ou à l'extérieur, etc.) .
La syntaxe est la même que l'utilisation de CSS en HTML. Il convient de noter que vous devez changer la couleur d'arrière-plan et la bordure en remplissage et contour
Tous les attributs ne peuvent pas être définis avec CSS, et les parties de coloration et de remplissage peuvent être définies avec CSS .
✓ Par exemple, fill, stroke, stroke-dasharray, etc. peuvent être définis avec CSS ; par exemple, les commandes de chemin ne peuvent pas être définies avec CSS.
◼ Quelles propriétés peuvent et ne peuvent pas être définies à l'aide de CSS ?
Dans la spécification SVG, les attributs sont divisés en attributs PresentationAttributes et Attributes.
✓ Attribut PresentationAttributes (supporte les CSS et les éléments)
✓ Attribut Attributes (ne peut être utilisé que dans les éléments)
✓ Astuces : Ces attributs n'ont pas besoin d'être mémorisés, mémorisez-les si vous les utilisez trop, et testez-les quand vous les oubliez.
◼ CSS remplit, contourne et colore les éléments en SVG, et prend en charge les quatre méthodes d'écriture suivantes :
Méthode 1 : style CSS en ligne (inline), écrit sur l'attribut style de l'élément
Méthode 2 : styles CSS en ligne (internes), écrit en
◼ Niveau de priorité du style CSS : style en ligne > style dans les définitions > tête externe/intérieure > remplissage d'attribut