Heim > Artikel > Web-Frontend > Was sind die realen Anwendungen von CSS und SVG?

Was sind die realen Anwendungen von CSS und SVG?

PHPznach vorne: 2023-09-17 16:05:061191Durchsuche

Entwickler verwenden CSS, um Webinhalte zu formatieren und korrekt darzustellen. Es kann verwendet werden, um jeden Inhalt attraktiv zu gestalten.

Die vollständige Form von SVG ist ein skalierbares Vektorbild. SVG ist ein Bildtyp wie JPG oder PNG. Ein JPG oder PNG ist ein Rasterbild, das aus einem Pixelraster erstellt wird. Wenn wir in ein Rasterbild hineinzoomen, wird es unscharf.

Vektorbilder werden mit mathematischen Funktionen erstellt, die Vektoren zeichnen und sie zu Formen verbinden. Da es sich nicht um ein Pixelraster handelt, wird es nie unscharf, selbst wenn wir über 100x hineinzoomen.

Immer wenn wir CSS mit Vektorbildern verwenden, wird es attraktiver und wir können leistungsstarke Bilder auf der Webseite erstellen. In diesem Tutorial lernen wir CSS und SVG in Aktion.

Beispiel 1 (Hinzufügen grundlegender Stile zu SVG-Bildern)

Im Beispiel unten haben wir einen Kreis im SVG-Format erstellt. Wir verwenden den HTML-Tag „svg“, um SVG-Bilder zu erstellen. Zusätzlich legen wir die Größe der Ansichtsbox fest. Zusätzlich legen wir die x- und y-Positionen des Kreises im Ansichtsrahmen fest.

Wir verwenden das Tag „Kreis“, um auf das SVG-Bild zuzugreifen und es in CSS zu formatieren. Benutzer können beobachten, dass sie Füllfarbe, Strichfarbe und Strichbreite über CSS steuern können. Sie können jedoch auch mithilfe verschiedener CSS-Eigenschaften zusätzliches Styling hinzufügen.

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

Beispiel 2 (Hover-Effekt zum SVG-Bild hinzufügen)

Im folgenden Beispiel haben wir zwei Quadrate im SVG-Vektorformat erstellt. Zusätzlich haben wir jeder Form einen Klassennamen zugewiesen. Wir verwenden den Klassennamen in CSS, um auf das HTML-Element zuzugreifen und die Füllfarbe festzulegen. Zusätzlich haben wir einen Hover-Effekt für die Form eingerichtet. Bewegen Sie in der Ausgabe den Mauszeiger über die Form und Sie können beobachten, wie sich ihre Farbe ändert.

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

Beispiel 3 (Animation zum SVG-Bild hinzufügen)

Im folgenden Beispiel fügen wir einem SVG-Bild eine Animation hinzu. Hier haben wir mit SVG einen Kreis erstellt. In CSS greifen wir über seine ID auf den Kreis zu und fügen den Move-Keyframe als Animation hinzu.

Im Move-Keyframe ändern wir die vertikale Position des Kreises, was uns einen springenden Kreis zeigt.

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

Wir haben gelernt, CSS mit SVG-Bildern zu verwenden. In diesem ersten Beispiel haben wir die grundlegende Verwendung von CSS und SVG gelernt. Im zweiten Beispiel haben wir dem SVG-Bild einen Hover-Effekt hinzugefügt; im vorherigen Beispiel haben wir dem SVG-Bild eine Animation hinzugefügt.

In der tatsächlichen Entwicklung können Benutzer CSS mit SVG kombinieren, um Animationen hinzuzufügen und GIFs zu erstellen.

Das obige ist der detaillierte Inhalt vonWas sind die realen Anwendungen von CSS und SVG?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Verwenden Sie CSS, um den linken Animationseffekt einzublendenNächster Artikel：Verwenden Sie CSS, um den linken Animationseffekt einzublenden

In Verbindung stehende Artikel

Mehr sehen