In diesem Artikel wird hauptsächlich die Verwendung von Viewbox-Attributen eingeführt, wenn SVG-Bilder in HTML5 verwendet werden, einschließlich einiger reaktionsschneller Designinhalte. Freunde, die es brauchen, können darauf verweisen , um die Parameter der Viewbox schnell zu verstehen
Das Ansichtbox -Attribut wird verwendet, um den Ursprung und die Größe des Koordinatensystems des Benutzer -SVG -Images anzugeben. Alle in SVG gezogenen Inhalte erfolgen relativ zu diesem Koordinatensystem. Da die SVG -Leinwand in alle Richtungen unendlich erweitert ist, können Sie sogar Grafiken außerhalb der Grenzen dieses Koordinatensystems zeichnen. Diese Grafiken, die relativ zum SVG -Fenster positioniert sind, können auch durch die Position des Koordinatensystems des Benutzers gesteuert werden.
Die Ansichtbox -Eigenschaft verwendet vier Parameter, um den Ort des Koordinatensystemursprung und der Größe der Größe: XY Breite anzugeben. Im Anfangsfall entspricht dieses Koordinatensystem dem initialisierten Fensterkoordinatensystem (bestimmt durch die Breite und Höhe des SVG -Bildes), und sein Ursprung liegt in (0, 0) - dh der oberen linken Ecke des SVG.
Durch Ändern der Werte der beiden Parameter x und y kann die Position des Ursprungs eingestellt werden. Ändern Sie die Werte von Breite und Höhe, um die Größe des Koordinatensystems zu ändern. Verwenden Sie einfach das Ansichtbox -Attribut, um die SVG -Leinwand zu erweitern oder zuzubereiten. Lesen Sie mit dem Beispiel.
Wichtig: In diesem Artikel werde ich das Standardverhalten (Skalierung und Position) der ViewBox im SVG -Fenster nicht ändern. Denn nach dem Standardverhalten des Attributs wird der Inhalt der Viewbox so vollständig wie möglich in das Fenster aufgenommen und dann in die Mitte platziert. Mithilfe der Eigenschaft PreserveSpectratio können Sie jedoch die Größe und Position der Viewbox frei ändern. In diesem Artikel ist dies jedoch keine notwendige Technik, sodass wir sie auch hier nicht ausführlich erklären.
Verwenden Sie Viewbox, um SVG zu erstellen, dh ViewBox -Attribut, um ein SVG der Kunstrichtung zu erstellen
Vor einiger Zeit bat einer meiner Kunden, den SVG -Avatar seiner Website gemäß verschiedenen Bildschirmgrößen auf unterschiedliche Größen zu setzen, so dass nur ein kleiner Teil davon auf einem kleinen Bildschirm sichtbar ist, ein größerer Teil auf einer mittelschweren Bildschirmgröße zu sehen ist und der vollständige Inhalt auf einem großen Bildschirm angezeigt wird. Die erste Idee, die mir zu diesem Zeitpunkt in den Sinn kam, war, dass seine Anforderung darin bestand, das Ansichtbox -Attribut zu verwenden, um das SVG -Bild zu beschneiden und dann einen bestimmten Teil des Bildes anzuzeigen, das er basierend auf verschiedenen Bildschirmgrößen sehen wollte.
Indem wir die Größe und den Ursprung des SVG -Koordinatensystems ändern, können wir den SVG aufnehmen und den Teil des Inhalts anzeigen, den wir im Fenster anzeigen möchten.
Mal sehen, wie man es implementiert.
Angenommen, wir haben dieses vollständige SVG -Bild wie folgt, und dann möchten wir es auf die Größe eines kleinen Bildschirms tauchen. Dieses Bild ist ein von Freepik entworfener kostenlos zu bedienender Hausvektor, der im Rahmen der nichtportierten Vereinbarung von Creative Commons zugelassen wurde. Nehmen wir zum Einfachheit halber zunächst an, dass das Bild genau das ist, was auf kleinen und mittleren Bildschirmen angezeigt werden soll, und den vollständigen Inhalt auf dem großen Bildschirm, wie unten gezeigt, angezeigt.
Das Bild links ist das komplette Bild, das wir mit der Ansichtbox -Eigenschaft aufnehmen werden, und das Bild rechts ist der Bereich, den wir auf dem kleinen Bildschirm anzeigen möchten.
Nehmen Sie nun den SVG auf, indem Sie den Wert der Viewbox -Eigenschaft ändern. Es gibt einige Dinge, die berücksichtigt werden müssen, wir werden später darüber sprechen. Erstens müssen wir jedoch das Koordinatensystem so ändern, dass sie den Inhalt des virtuellen Box -Rechteckbereichs im obigen Bild übereinstimmen. Durch Anpassung des Ursprungs des Systems und der Werte von Breite und Höhe können wir seinen anfänglichen 0 0 800 800 Parameterwert ändern.
Aber woher kennen wir die neuen Koordinaten und neuen Dimensionen? Der Punkt ist nicht, viele wiederholte Experimente und Fehler zu durchlaufen.
Es gibt verschiedene Möglichkeiten. Da wir bereits im Grafikeditor sind (mein Beispiel verwendet AI), können wir das Panel des Editors verwenden, um die Position und die Abmessungen der Elemente zu erhalten.
Ich zeichne dieses gepunktete rechteckige Box und darstellt, dass ich auch die Position und die Abmessungen des Rechtecks auf dem kleinen Bildschirm darstellen und als Wert der Viewbox verwenden können. Mit AIs Transformationspanel (siehe Abbildung unten) haben wir die von uns benötigten Werte erhalten. Durch die Auswahl des Rechtecks und das Klicken auf die Transformationslink in der oberen rechten Ecke erhalten wir das in der folgende Abbildung angezeigte Bedienfeld, einschließlich der von uns benötigten X-, Y-, Breiten- und Höhenwerte.
Das Transformationspanel in dieser KI kann verwendet werden, um die Position und Größe des ausgewählten Rechtecks zu erhalten.
Möglicherweise haben Sie festgestellt, dass der obige Wert keine Ganzzahl ist, daher müssen wir ihn manuell ändern. Basierend auf den oben genannten Informationen ändern wir den Wert der Viewbox auf 0 200 512 512.
Da das Seitenverhältnis der neuen Viewbox mit dem des SVG -Fensters (beide Quadrat) übereinstimmt, wird der Inhalt in der Viewbox erweitert und nur der ausgewählte Bereich wird im Fenster angezeigt. Nachdem Sie den Wert der Viewbox geändert haben, ist das Ergebnis in der Abbildung angezeigt:
Neu geschnittenes SVG. Nur der Ort, an dem wir angeben, dass die Ansichtbox -Eigenschaft im Fenster sichtbar ist. Der blaue Rand zeigt das Fenster des SVG an.
Zu diesem Zeitpunkt gibt es ein Problem, das gelöst werden muss:
Was ist, wenn das Seitenverhältnis des beschnittenen Bereichs (d. H. Viewbox) das Seitenverhältnis des SVG -Fensters ist?
In diesem Fall wird es einen erheblichen Überlauf geben. Der offensichtliche Überlauf, ich meine keine Erweiterung über die SVG -Fenstergrenze hinaus, sondern ein Überlauf im Verhältnis zum neuen Benutzerkoordinatensystem, das von ViewBox definiert wurde. Die folgende Abbildung liefert entsprechende Erklärungen.
Wenn sich das Seitenverhältnis von Viewbox vom Seitenverhältnis der Viewbox unterscheidet, überflutet der Inhalt im SVG das Benutzerkoordinatensystem und das Ergebnis kann so sein.
Der schwarze Rand repräsentiert das neue Benutzerkoordinatensystem, und der blaue Rand ist das SVG -Fenster.
Der schwarze Rand im rechten Bild oben ist der Bereich, der durch die Viewbox definiert ist. Nach dem Standardverhalten von Viewbox im Fenster wird es so weit wie möglich zentriert und vergrößert, um sicherzustellen, dass der Inhalt im Fenster (blauer Rand) enthalten ist.
Da sich die SVG -Leinwand konzeptionell unendlich in alle Richtungen erstreckt, können Sie Grafiken außerhalb der Grenzen des Benutzerkoordinatensystems zeichnen, und der Inhalt überfließt und bewegen sich direkt, wie in der obigen Abbildung gezeigt.
Wenn Sie das Seitenverhältnis des SVG -Fensters (Breite und Höhe des SVG) ändern, um sie an das Seitenverhältnis der Viewbox anzupassen, sehen Sie keinen Überlauf, da der Zoom der Viewbox wie im vorherigen Beispiel an das Fenster angepasst ist.
In einigen Fällen möchten oder möchten Sie jedoch das Seitenverhältnis des SVG überhaupt nicht ändern. Wenn Sie beispielsweise SVG Sprite als Bildersatz verwenden, um Bilder auf der Seite anzuzeigen. In den meisten Fällen hat ein Bild ein festes Seitenverhältnis - und Sie möchten die Bildgröße nicht ändern, nur um sich an den Inhalt eines kleinen Bildes anzupassen. Oder vielleicht haben Sie ein Symbolsystem eingebettet und möchten, dass alle Symbole gleichzeitig gleich groß bleiben.
Um den Überschuss abzuschneiden (zum Beispiel werden einige andere Symbole auf Sprite im Fenster angezeigt), können Sie <Clippath> verwenden, um den Überschuss auszuschneiden. Der Ausschnittpfad kann ein <Rect> -Element sein, das den gesamten Ansichtsboxbereich abdeckt und dieses Element dann auf das Root SVG anwendet.
Es gibt jedoch noch eine andere Sache: Stellen Sie sicher, dass die X- und Y -Eigenschaften von <Rect> mit der ViewBox übereinstimmen, es sei denn, das Rechtek wird am Ursprung des ursprünglichen/initialisierten Systems relativ positioniert sein, und der Inhalt des zu beschnittenen SVG ist ebenfalls ungewiss.
CSS -Code -Inhalt in Zwischenablage kopieren