Maison > interface Web > Tutoriel H5 > Une analyse approfondie des techniques du didacticiel SVG_html5 en HTML5

Une analyse approfondie des techniques du didacticiel SVG_html5 en HTML5

WBOY
Libérer: 2016-05-16 15:46:13
original
1561 Les gens l'ont consulté

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 à < ;canvas> é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



< ;!--
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
-->






< /html>
* Élément de cercle







* Élément Ellipse






* Élément de ligne





< ligne x1="200" y1="200" x2="200" y2="10" Stroke-width="10" Stroke="noir"/>

< ;/ 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














< /svg>

* 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 :


< svg width="500px" height="500px">
Changez pour le bien de la vie, créez pour le bien du changement.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal