Introduction de l'article de wulin.com (www.vevb.com): Le nom complet de SVG est un graphique vectoriel évolutif. Si vous avez utilisé Adobe Illustrator, je crois que vous ne connaissez pas ce format de photos approprié!
Avant de commencer à utiliser SVG, jetons un coup d'œil à SVG en premier et expliquons pourquoi nous utilisons SVG.
Le nom complet de SVG est des graphiques vectoriels évolutifs. Si vous avez utilisé Adobe Illustrator, je crois que vous ne connaissez pas ce format de photos approprié!
Pourquoi utiliser SVG? Support de navigateurSi vous devez prendre en charge ces versions du navigateur, vous pouvez utiliser Modernizr comme suit:
if (! modernizr.svg) {
$ (. gblogo img) .attr (src, images / logo.png);
}
Ou utilisez le code plus simple suivant:
<img src = gblogo.svg onerror = this.onerror = null; this.src = gblogo.png>
Les fichiers SVG sont utilisés comme images généralesVous pouvez l'utiliser directement comme une image, comme suit:
<img src = logo.svg href = class = logo>
csswang.com
</a>
Code CSS:
.logo {
afficher:
Texte-indent:
largeur:
hauteur:
arrière-plan:
taille arrière:
}
Utilisation de SVG en ligneVous pouvez copier le code SVG directement dans le corps et vous verrez l'image, comme suit:
<body>
<! - Copiez le code SVG ici et l'image sera affichée ->
</docy>
Contrôler le SVG avec CSSVous pouvez utiliser CSS pour contrôler le fichier SVG. Le code suivant contrôlera la couleur d'arrière-plan de l'image lorsque la souris est suspendue:
<g class = logo transform = tradlater (0,000000,500.000000) échelle (0,100000, -0,100000)
rempli = # 00000 trait = aucun>
Le code ci-dessus définit une classe d'un logo, et nous pouvons le définir dans CSS comme suit:
.logo: Hover {
remplir:
...
}
Notez que dans SVG, nous utilisons le remplissage au lieu de l'arrière-plan pour définir la couleur d'arrière-plan.
Vous pouvez même utiliser des filtres pour contrôler l'ambiguïté, comme suit:
.logo: Hover {
remplir:
filtre:
}
Lorsque vous utilisez la souris pour planer l'image, l'effet suivant sera.
Débogage en ligne:
Résumé des outils liés à SVGSVG est un format d'image très puissant qui peut vous aider à traiter efficacement les images et a une méthode d'affichage graphique plus flexible et plus puissante que JPG ou PNG. Je crois que s'il est appliqué à temps, il deviendra certainement la méthode de traitement d'image la plus populaire!