Eingehende Analyse der Verwendung des viewBox-Attributs bei der Verwendung von SVG-Bildern in HTML5_html5-Tutorial-Fähigkeiten

Verstehen Sie schnell die Parameter von viewBox

Das viewBox-Attribut wird verwendet, um den Ursprung und die Größe des Koordinatensystems des SVG-Bilds des Benutzers anzugeben. Alle in SVG gezeichneten Inhalte werden relativ zu diesem Koordinatensystem erstellt. Da die SVG-Leinwand in alle Richtungen unendlich ausgedehnt ist, können Sie sogar Grafiken außerhalb der Grenzen dieses Koordinatensystems zeichnen, aber die Positionierung dieser Grafiken relativ zum SVG-Ansichtsfenster kann auch durch die Position des Benutzerkoordinatensystems gesteuert werden.

Das viewBox-Attribut verwendet vier Parameter, um die Position des Ursprungs des Koordinatensystems und seine Abmessungen anzugeben: x y Breite Höhe. Anfänglich entspricht dieses Koordinatensystem dem initialisierten Viewport-Koordinatensystem (bestimmt durch die Breite und Höhe des SVG-Bilds) und sein Ursprung liegt bei (0, 0) – der oberen linken Ecke des SVG.

Durch Ändern der Werte der beiden Parameter x und y kann die Position des Ursprungs angepasst werden. Durch Ändern der Werte für Breite und Höhe kann sich die Größe des Koordinatensystems ändern. Die alleinige Verwendung des viewBox-Attributs kann Ihnen helfen, die SVG-Leinwand zu erweitern oder zuzuschneiden. Lesen Sie die Beispiele mit.

Wichtiger Hinweis: In diesem Artikel werde ich das Standardverhalten (Skalierung und Position) der ViewBox im SVG-Ansichtsfenster nicht ändern. Denn gemäß dem Standardverhalten der Eigenschaft wird der Inhalt der viewBox so weit wie möglich vollständig im Ansichtsfenster enthalten und dann in der Mitte platziert. Durch die Verwendung des Attributs „preserveAspectratio“ können Sie jedoch die Größe und Position der viewBox frei ändern. In diesem Artikel handelt es sich jedoch nicht um eine erforderliche Technik, sodass wir hier nicht näher darauf eingehen.
Verwenden Sie viewBox zum Zuschneiden von SVG, d. h. verwenden Sie das viewBox-Attribut, um Art Direction SVG zu erstellen

Vor einiger Zeit forderte einer meiner Kunden, dass der SVG-Avatar seiner Website für unterschiedliche Bildschirmgrößen auf unterschiedliche Größen eingestellt werden sollte, sodass auf kleinen Bildschirmen nur ein kleiner Teil davon sichtbar wäre, während er auf mittleren Bildschirmen in Ordnung wäre Sehen Sie sich einen größeren Teil an und sehen Sie dann den gesamten Inhalt auf dem großen Bildschirm. Der erste Gedanke, der mir damals in den Sinn kam, war, dass seine Anfrage eigentlich darin bestand, das viewBox-Attribut zum Zuschneiden des SVG-Bildes zu verwenden und dann einen bestimmten Teil des Bildes, den er sehen wollte, basierend auf verschiedenen Bildschirmgrößen anzuzeigen.

Durch Ändern der Größe und Ursprungsposition des SVG-Koordinatensystems können wir das SVG zuschneiden und den Teil des Inhalts anzeigen, den wir im Ansichtsfenster anzeigen möchten.

Mal sehen, wie es geht.

Angenommen, wir haben das folgende vollständige SVG-Bild und möchten es dann auf die Größe eines kleinen Bildschirms zuschneiden. Bei diesem Bild handelt es sich um ein frei verwendbares Haus-Vektorbild, das von Freepik entworfen wurde. Das Bild ist unter der Creative Commons Attribution 3.0 Unported-Lizenz lizenziert. Nehmen wir der Einfachheit halber an, dass das Bild nur so zugeschnitten wird, dass es auf kleinen und mittleren Bildschirmen angezeigt wird, und den vollständigen Inhalt auf großen Bildschirmen, wie unten gezeigt.

Das Bild links ist das vollständige Bild, das wir mit dem viewBox-Attribut zuschneiden, und das Bild rechts ist der Bereich, den wir auf dem kleinen Bildschirm anzeigen möchten.

Schneiden Sie nun die SVG-Datei zu, indem Sie den Wert des viewBox-Attributs ändern. Es gibt einige Dinge zu beachten, auf die wir gleich noch eingehen werden. Aber zuerst müssen wir das Koordinatensystem ändern, damit es mit dem Inhalt des gestrichelten Rechtecks ​​im Bild oben übereinstimmt. Durch Anpassen des Ursprungs des Systems und der Werte für Breite und Höhe können wir seinen anfänglichen Parameterwert von 0 0 800 800 ändern.

Aber woher kennen wir die neuen Koordinaten und Dimensionen? Es geht nicht darum, viele wiederholte Versuche und Irrtümer durchzugehen.

Es gibt mehrere Möglichkeiten. Da wir uns bereits in einem Grafikeditor befinden (mein Beispiel verwendet KI), können wir die Bedienfelder des Editors verwenden, um die Position und Abmessungen des Elements zu ermitteln.

Ich zeichne dieses gepunktete rechteckige Feld nicht nur, um den Inhalt darzustellen, den ich auf dem kleinen Bildschirm anzeigen möchte, sondern auch aus einem anderen Grund: Wir können die Position und Größe dieses Rechtecks ​​ermitteln und sie dann als Wert verwenden die viewBox-Nutzung. Mit dem Transform-Bedienfeld von AI (siehe Abbildung unten) erhalten wir die Werte, die wir benötigen. Durch Auswahl des Rechtecks ​​und Klicken auf den Link „Transformieren“ in der oberen rechten Ecke erhalten wir das unten gezeigte Panel, einschließlich der benötigten Werte für x, y, Breite und Höhe.

Das Transformationsfeld in dieser KI kann verwendet werden, um die Position und Größe des ausgewählten Rechtecks ​​zu ermitteln

Möglicherweise ist Ihnen aufgefallen, dass der obige Wert keine Ganzzahl ist, daher müssen wir ihn manuell ändern. Basierend auf den obigen Informationen ändern wir den Wert von viewBox auf 0 200 512 512.

Da das Seitenverhältnis der neuen ViewBox mit dem des SVG-Ansichtsfensters übereinstimmt (beide sind quadratisch), wird der Inhalt der ViewBox erweitert und nur der ausgewählte Bereich wird im Ansichtsfenster angezeigt. Nach dem Ändern des Werts von viewBox sieht das Ergebnis wie folgt aus:

Neues zugeschnittenes SVG. Nur der Ort, den wir mit der viewBox-Eigenschaft angeben, ist im Ansichtsfenster sichtbar. Der blaue Rand zeigt das Ansichtsfenster der SVG-Datei an.

An diesem Punkt gibt es ein Problem, das gelöst werden muss:

Was ist, wenn das Seitenverhältnis des zugeschnittenen Bereichs (d. h. ViewBox) != das Seitenverhältnis des SVG-Ansichtsfensters ist?

In diesem Fall kommt es zu einem erheblichen Überlauf. Mit offensichtlichem Überlauf meine ich nicht die Erweiterung über die Grenzen des SVG-Ansichtsfensters hinaus, sondern den durch die ViewBox relativ zum neuen Benutzerkoordinatensystem definierten Überlauf. Die folgende Abbildung verdeutlicht dies.

Wenn sich das Seitenverhältnis der ViewBox vom Seitenverhältnis des Ansichtsfensters unterscheidet, überläuft der Inhalt im SVG das Benutzerkoordinatensystem und das Ergebnis kann wie folgt aussehen.

Der schwarze Rand stellt das neue Benutzerkoordinatensystem dar und der blaue Rand ist das SVG-Fenster.

Der schwarze Rand im rechten Bild oben ist der durch die ViewBox definierte Bereich. Gemäß dem Standardverhalten von viewBox innerhalb des Fensters wird es so weit wie möglich zentriert und vergrößert, um sicherzustellen, dass sein Inhalt so weit wie möglich im Fenster (blauer Rand) enthalten ist.

Da die SVG-Leinwand konzeptionell in alle Richtungen unendlich ist, können Sie Grafiken außerhalb der Grenzen des Benutzerkoordinatensystems zeichnen, und der Inhalt läuft direkt über und bewegt sich, wie in der Abbildung oben gezeigt.

Wenn Sie das Seitenverhältnis des SVG-Ansichtsfensters (SVG-Breite und -Höhe) ändern, um es an das Seitenverhältnis der ViewBox anzupassen, wird der Überlauf nicht angezeigt, da die ViewBox so skaliert wird, dass sie in das Ansichtsfenster passt, und zwar wie im vorherigen Beispiel .

In einigen Fällen können oder möchten Sie jedoch möglicherweise das Seitenverhältnis Ihrer SVG-Datei nicht ändern. Wenn Sie beispielsweise SVG-Sprites als Bildsatz verwenden, um Bilder auf der Seite anzuzeigen. In den meisten Fällen haben Bilder ein festes Seitenverhältnis – und Sie möchten die Größe des Bildes nicht ändern, nur um den Inhalt eines kleinen Bildes darin unterzubringen. Oder vielleicht betten Sie ein Symbolsystem ein und möchten, dass alle Symbole gleichzeitig die gleiche Größe haben.

Um überflüssige Dinge abzuschneiden (zum Beispiel einige andere Symbole auf dem Sprite, die im Ansichtsfenster angezeigt werden), können Sie verwenden, um die überflüssigen Teile abzuschneiden. Der Beschneidungspfad kann ein -Element sein, das den gesamten viewBox-Bereich abdeckt und dann auf die Stamm-SVG angewendet wird.

Es gibt jedoch noch etwas zu beachten: Stellen Sie sicher, dass die x- und y-Attribute von mit denen der viewBox übereinstimmen, es sei denn, das rect wird relativ zum Ursprung des ursprünglichen/initialisierten Systems positioniert , dann wird das SVG irgendwann zugeschnitten. Der Inhalt ist ebenfalls unsicher.

CSS-CodeInhalt in die Zwischenablage kopieren

1. "http://w3.org/2000/svg" viewBox="vx vy width height" clip-path="url(#clipper)" Breite=".." Höhe="..">
"clipper"> ="100%"
3. height="100%" >

   Natürlich bedeutet das Abschneiden des Überschusses, dass Sie immer noch ein anderes Seitenverhältnis verwenden und immer noch mit dem zusätzlichen Leerraum auf beiden Seiten des Inhalts umgehen müssen. Wenn es sich bei der SVG-Datei um eine fortlaufende Szene handelt, wie in unserem vorherigen Beispiel, ist dies nicht erforderlich, da Sie das Seitenverhältnis des Ansichtsfensters noch anpassen müssen. Wenn es sich bei der SVG-Datei um eine Reihe von Symbolen handelt und Sie sie nur einmal in einem anderen Ansichtsfenster verwenden, stellt dies möglicherweise kein Problem dar.

   Eine wichtige Sache, die Sie hier beachten sollten, ist, dass das Seitenverhältnis der ViewBox am besten mit dem Seitenverhältnis des Ansichtsfensters übereinstimmt. Außerdem müssen Sie den Fix festlegen, um undefinierten zusätzlichen Leerraum im SVG zu vermeiden.

   ViewBox kann also zum Zuschneiden von SVG verwendet werden und bei Bedarf nur einen bestimmten Teil des SVG anzeigen. Aber wie lässt sich das auf Instanzen anwenden?

   Art Directing SVG im responsiven Design

   In diesem Teil gibt es nichts hinzuzufügen, außer dem Code des eigentlichen Prozesses. Nehmen wir also an, Sie haben die oben gezeigte SVG-Datei und möchten sie als Avatar verwenden. Auf kleinen und mittelgroßen Bildschirmen möchten Sie beispielsweise nur einen beschnittenen Teil davon anzeigen und dann den vollständigen Avatar auf einem großen Bildschirm Bildschirm.

   Um die Breiten- und Höhenwerte des SVG-Fensters zu ändern, können wir CSS verwenden. Aber um den Wert der viewBox zu ändern, müssen wir derzeit JavaScript verwenden.

   Nicht alle SVG-Attribute und CSS-Attribute können gleichermaßen verwendet werden; in CSS kann nur ein Satz von Attributen mit derselben Wirkung wie CSS-Attribute festgelegt werden. Eine Übersicht über die SVG-Eigenschaften, die als CSS-Eigenschaften verwendet werden können, finden Sie in dieser Tabelle. In SVG2 können dieser Liste viele Attribute (wie x, y, cx, cy, r usw.) hinzugefügt werden, aber dies sind die Attribute, die wir jetzt verwenden können.

   Um verschiedene Teile von SVG anzuzeigen, müssen Sie den Wert der viewBox basierend auf verschiedenen Medienabfragen ändern. Sie können Modernizr verwenden, um die Medienabfragebedingungen zu finden, und dann den Wert der viewBox entsprechend in JavaScript ändern. Ein Beispiel ist wie folgt:

   CSS-CodeInhalt in die Zwischenablage kopieren

   1. // Holen Sie sich die Referenz von root var svgRoot = ...; // Hängt davon ab, wie Sie das SVG einbetten und referenzieren
   2. // Definieren Sie den Parameterwert von viewBox
   3. var vbValue =
   4. '0 200 512 512'; // Verwenden Sie den Medienabfrageabruf von Modernizr, um den Wert der viewBox zu ändern
   5. if (Modernizr.mq('(max-width: 700px)'
   6. )) { svgRoot.setAttribute('viewBox'
   7. , }
   8. //Andere Größen
   9. Das funktioniert, aber wäre es nicht schön, wenn wir CSS verwenden könnten, um diesen Effekt zu erzielen?

   Verwenden Sie die CSS-Eigenschaft viewBox, um SVG zuzuschneiden
   Haftungsausschluss: Zum Zeitpunkt des Schreibens dieses Artikels gab es keine CSSviewBox-Eigenschaft. Dies ist nur ein Beispiel, um zu erklären, warum diese Eigenschaft nützlich ist und wie ich mir vorstelle, dass sie genutzt werden könnte.

   Idealerweise würden wir es so verwenden:

   CSS-Code
   Inhalt in die Zwischenablage kopieren

Diese Stile werden in die SVG-Datei eingefügt (oder daraus entfernt), und dann passt die SVG ihren viewBox-Wert entsprechend der Größe des Ansichtsfensters an. Sei es das Seitenansichtsfenster (im Fall von Inline

Dies ist jedoch derzeit nicht möglich, da es in CSS kein viewBox-Attribut gibt.

Vor einiger Zeit habe ich einen Redakteur der SVG-Spezifikation zu diesem Problem gefragt und er sagte, dass ich SVGWG Vorschläge machen könnte, die auf der tatsächlichen Verwendung und Beispielen basieren. Nach einigen Diskussionen auf Twitter entdeckte ich, dass es vor einigen Jahren einen ähnlichen SVGWG-Vorschlagsthread gab. Der ursprüngliche Vorschlag existiert noch heute, daher hoffe ich, dass dieser Vorschlag anhand einiger praktischer Anwendungsbeispiele in naher Zukunft weiterentwickelt und umgesetzt werden kann. Wenn Sie die viewBox-Eigenschaft auch in CSS sehen möchten, helfen Sie bitte dabei, dies zu erreichen, indem Sie diesen Vorschlag vorantreiben und kommentieren.

Dinge, die Sie beachten sollten, wenn Sie viewBox zum Vervollständigen der SVG Art-Direction verwenden

Als ich am Projekt meines Kunden arbeitete, brauchte ich weniger als eine Minute, um den Avatar gemäß den Anforderungen des Kunden künstlerisch zu gestalten. Allerdings führt dies letztendlich zu einer Verzweigung in drei separate SVGs und nicht zu denselben SVG-verschiedenen ViewBoxes auf unterschiedlichen Bildschirmgrößen.

Der Grund, warum wir drei SVGs ausgewählt haben, ist, dass die Größe der vollständigen SVG-Datei zu groß ist und auf Mobilgeräten eine Größe von über 100 KB erreicht. Die ursprüngliche SVG-Datei war etwa 200 KB groß. Ich konnte die Datei durch Optimierung der SVG-Datei auf fast die Hälfte komprimieren, aber das Bild war immer noch zu groß für mobile Geräte, sodass wir am Ende drei Bilder unterschiedlicher Größe verwendeten. Bei der künstlerischen Leitung von SVG müssen Sie Folgendes bedenken: Leistungsprobleme. Wenn Ihre SVG-Datei zu groß ist, verwenden Sie viewBox nicht für die Artdirektion.

Wenn Sie sich nun dafür entscheiden, drei verschiedene SVG-Bilder zu verwenden, gibt es eine Reihe möglicher Möglichkeiten – es hängt davon ab, wie Sie das SVG einbetten und auch davon, was Sie erreichen möchten und was nicht zu erreichen.

Die Verwendung des -Elements ist die ideale Möglichkeit, verschiedene SVG-Bilder zu vervollständigen. Es stellt uns nicht nur je nach Browser unterschiedliche SVG-Dateien zur Auswahl zur Verfügung, es erfordert auch nicht die Verwendung von JavaScript und ermöglicht uns auch die Bereitstellung einer Vielzahl optimierter heruntergestufter Bilder für Browser, die es nicht unterstützen (IE8 und unten). ist sehr nützlich für die Arbeit mit SVG. Alles über SVG-Fallback können Sie in diesem Artikel lesen.

Aber wie bereits erwähnt, ist nicht die beste Wahl, wenn Sie SVG mit Animationen oder interaktiven Effekten wünschen. Ebenso wie die Verwendung von zum Einbetten von SVG kann SVG nicht gestylt oder animiert werden, es sei denn, der Stil und die Animation sind in der

Ich sage also immer: SVG bietet uns viele Optionen, die es uns ermöglichen, einen Kompromiss einzugehen, Prioritäten zu setzen und manchmal sogar Kompromisse einzugehen und auf dieser Grundlage die beste Entscheidung zu treffen. Aber wenn es um Leistung geht, ist es gut für die Entwicklung, keine Kompromisse einzugehen!

Da wir das Problem der Verwendung des viewBox-Attributs zum Ändern der Größe der SVG-Leinwand erwähnt haben, bevor wir zum Schluss kommen, schauen wir uns ein weiteres Beispiel an, in dem wir dieses Attribut verwenden können, um beim Umgang mit SVG etwas Zeit und Energie zu sparen.

Verwenden Sie viewBox, um die SVG-Leinwand zu erweitern

So wie das viewBox-Attribut zum Skalieren einer SVG verwendet werden kann, kann es auch zum Erweitern der SVG-Leinwand verwendet werden.

Vor ein paar Wochen habe ich ein Tool erstellt, das SVG-Radialmenüs generieren kann. Ich habe einige Beispiele erstellt, um zu demonstrieren, wie JavaScript zum Animieren der generierten Menüs verwendet wird. Die Demo wird mithilfe des