Machen Sie Ihre eigenen reaktionsschnellen SVG -Diagramme und Infografiken

Nutzen Sie die Kraft reaktionsschnell SVGs: Verbesserung der Benutzererfahrung durch Steuerelemente auf Code-Ebene

In diesem Artikel wird untersucht, wie reaktionsschnellere und benutzerfreundlichere skalierbare Vektorgrafiken (SVGs) erstellt werden, indem sie ihr Markup direkt manipulieren. Wir nutzen einen Texteditor und das HTML -Panel von CodePen.io zum Experimentieren.

SVG Sauberkeit und Effizienz

verbessern

<text></text> Für sauberere, kompaktere SVGs sollten wiederholte Inline -Eigenschaften in CSS -Klassen überarbeitet werden, was die Best Practices der HTML widerspiegelt. Dies verbessert die Lesbarkeit, reduziert die Dateigröße und ermöglicht das zentralisierte Stilmanagement. Betrachten Sie beispielsweise diese sich wiederholenden

Elemente:

<text> y="430" x="40" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1960>
<text> y="430" x="118" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1965>
<text> y="430" x="196" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1970>

<defs></defs> Diese können mit einer CSS -Klasse innerhalb des Abschnitts

vereinfacht werden:

.y-axis text {
    text-anchor: middle;
    fill: rgb(103, 102, 102);
    font-size: 12px;
}

<text></text> Die

Elemente werden dann:

<text class="y-axis" y="430" x="40">1960</text>
<text class="y-axis" y="430" x="118">1965</text>
<text class="y-axis" y="430" x="196">1970</text>

Dieser Ansatz verbessert die Code -Wartbarkeit erheblich und verringert die Dateigröße. Ähnliche Techniken können auf andere sich wiederholende Elemente angewendet werden.

Erstellen reaktionsschneller SVGs mit CSS -Medienabfragen

Nutzung von CSS -Medienabfragen reagiert SVGs auf verschiedene Bildschirmgrößen. Dies ist entscheidend für die Aufrechterhaltung der Lesbarkeit bei verschiedenen Auflösungen. Zum Beispiel, um die Schriftgrößen basierend auf der Bildschirmbreite anzupassen:

@media (max-width: 500px) {
    .label-startrek, .label-starwars {
        font-size: 170%;
    }
    .y-axis text, .x-axis text {
        font-size: 130%;
    }
}

display: none; Dies stellt sicher, dass Text auch auf kleineren Bildschirmen lesbar bleibt. Weitere Verbesserungen, wie z. B. konditionell versteckte Elemente mit opacity: 0; oder :nth-of-type innerhalb von Medienabfragen, können das Layout und die Lesbarkeit an kleineren Haltepunkten verbessern. Der

-Alektor bietet einen eleganteren Ansatz für die Targeting spezifischer Elemente.

jenseits der grundlegenden Reaktionsfähigkeit

reaktionsschnelle SVGs passen sich nicht nur an die Bildschirmgröße an, sondern auch an ihre Position innerhalb eines Layouts. Sie können sich dynamisch ändern, um den verfügbaren Platz zu füllen und sie ideal für interaktive Elemente und dynamische Inhalte zu machen. Dies ermöglicht das Erstellen von anpassbaren Miniaturansichten oder interaktiven Diagrammen, die ihre Detailpegel basierend auf dem verfügbaren Speicherplatz anpassen.

Schlussfolgerung

Durch die Einführung von Code-Ebene-Kontrolle und Verwendung von CSS-Techniken können SVGs in hochverantwortliche und benutzerfreundliche Komponenten umgewandelt werden. Das Experimentieren mit CodePen.io und einem Texteditor ist eine leistungsstarke Möglichkeit, diese Techniken zu erforschen und dynamische, anpassbare Grafiken zu erstellen. Denken Sie daran, Ihre endgültigen CSS in den Abschnitt "<defs></defs> des SVG" für in sich geschlossene, wartbare Dateien zu integrieren.

Das obige ist der detaillierte Inhalt vonMachen Sie Ihre eigenen reaktionsschnellen SVG -Diagramme und Infografiken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!