Maison > Article > interface Web > Quelles sont les applications concrètes de CSS et SVG ?
Quelles sont les applications concrètes de CSS et SVG ?
- PHPzavant
- 2023-09-17 16:05:061210parcourir
Les développeurs utilisent CSS pour styliser le contenu Web et le représenter correctement. Il peut être utilisé pour rendre n’importe quel contenu attrayant.
La forme complète de SVG est une image vectorielle évolutive. SVG est un type d'image comme jpg ou png. Un jpg ou un png est une image raster créée à l'aide d'une grille de pixels. Si nous zoomons sur une image raster, elle commence à devenir floue.
Les images vectorielles sont créées à l'aide de fonctions mathématiques qui dessinent des vecteurs et les connectent pour former des formes. Comme il ne s'agit pas d'une grille de pixels, elle ne devient jamais floue même si nous zoomons plus de 100x.
Chaque fois que nous utilisons CSS avec des images vectorielles, cela le rend plus attrayant et nous pouvons créer des images puissantes sur la page Web. Dans ce didacticiel, nous apprendrons CSS et SVG en action.
Exemple 1 (Ajout de styles de base aux images SVG)
Dans l'exemple ci-dessous, nous avons créé un cercle au format SVG. Nous utilisons la balise HTML "svg" pour créer des images SVG. De plus, nous définissons la taille de la zone d'affichage. De plus, nous définissons les positions x et y du cercle dans le cadre de vue.
Nous utilisons la balise « circle » pour accéder et styliser l'image svg en CSS. Les utilisateurs peuvent constater qu'ils peuvent contrôler la couleur de remplissage, la couleur du trait et la largeur du trait via CSS. Cependant, ils peuvent également ajouter un style supplémentaire à l'aide de diverses propriétés CSS.
<html>
<head>
<style>
circle {
fill: blue;
stroke: red;
stroke-width: 3;
}
</style>
</head>
<body>
<h3> Using the CSS with SVG <i> to style the SVG image </i> </h2>
<svg viewBox="0 0 100 100">
<circle cx="20" cy="20" r="10" />
</svg>
</body>
</html>
Exemple 2 (Ajouter un effet de survol sur une image SVG)
Dans l'exemple ci-dessous, nous avons créé deux carrés au format vectoriel SVG. De plus, nous avons attribué un nom de classe à chaque forme. Nous utilisons le nom de la classe en CSS pour accéder à l'élément HTML et définir la couleur de remplissage. De plus, nous avons configuré un effet de survol pour la forme. Dans le résultat, survolez la forme et vous pourrez observer comment sa couleur change.
<html>
<head>
<style>
.shape {fill: green;}
.shape:hover {fill: #ff0000;}
</style>
</head>
<body>
<h4> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h4>
<svg viewBox="0 0 960 600">
<g id="shapes">
<path class="shape" d="M100,100 L150,50 L200,100 L150,150 Z" />
<path class="shape" d="M400,100 L450,50 L500,100 L450,150 Z" />
</g>
</svg>
</body>
</html>
Exemple 3 (Ajouter une animation à l'image SVG)
Dans l'exemple ci-dessous, nous ajoutons une animation à une image SVG. Ici, nous avons créé un cercle en utilisant SVG. En CSS, nous accédons au cercle en utilisant son identifiant et ajoutons l'image clé Move comme animation.
Dans l'image clé Déplacer, nous modifions la position verticale du cercle, ce qui nous montre un cercle rebondissant.
<html>
<head>
<style>
#ball {
animation: move 3s infinite;
transform-origin: center bottom;
}
@keyframes move {
0% {transform: translateY(0);}
50% {transform: translateY(-30px);}
100% {transform: translateY(0);}
}
</style>
</head>
<body>
<h3> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h3>
<svg viewBox="0 0 100 100">
<circle id="ball" cx="30" cy="30" r="15" fill="aqua" />
</svg>
</body>
</html>
Nous avons appris à utiliser CSS avec des images SVG. Dans ce premier exemple, nous avons appris l'utilisation de base de CSS et SVG. Dans le deuxième exemple, nous avons ajouté un effet de survol à l'image SVG ; dans l'exemple précédent, nous avons ajouté une animation à l'image SVG.
En développement réel, les utilisateurs peuvent combiner CSS avec SVG pour ajouter des animations et créer des GIF.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!