So beschneiden Sie SVG-Dateien in HTML/CSS
Ich habe die folgende HTML-Datei (mypage.html). Ein SVG file Wird als Bild darin angehängt.
<!doctype html>
<html>
<body>
<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>
</body>
</html>
Die erzeugte Seite sieht folgendermaßen aus:
Beachten Sie, dass um den Kreis herum eine große weiße Leerstelle vorhanden ist. Wie kann ich das in HTML oder CSS zuschneiden?
Ernte
Sie können das Bild zuschneiden, indem Sie negative Ränder verwenden und die Größe des übergeordneten Elements festlegen:
CSS ein skaliertes und zugeschnittenes Bild anzeigen
ABER DIESES IS EIN SVG!
Sie können eine SVG-Datei nicht nur direkt in HTML anzeigen:
<svg viewBox="0 0 100 100" height="150px" width="150px">
<rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>sie können jedoch zum Zuschneiden/Ändern der Größe und zum SVG das viewBox-Attribut für das SVG einfach ändern:
viewBox="0 0 100 100"
zeigt alles innerhalb von 0 und 100 Einheiten von x und y an
viewBox="-100 -100 100 100"
Zeigt alles von -100 bis 100 Einheiten x & y an
viewBox="50 50 500 500"
Zeigt zwischen 50 und 500 Einheiten x & y an
Keine dieser Antworten (und mehrere ähnliche/Duplikate) schien dies vollständig zu beantworten und ein Beispiel zu geben.
Schritt für Schritt: Entfernen Sie "Polsterung" (umgebende Leerzeichen) direkt im SVG-Code
Bestimmen Sie die "tatsächliche" Größe Ihrer SVG ohne Auffüllung. Für mich war dies am einfachsten, wenn Sie den (Chrome) -Inspektor verwenden und über das path -Element innerhalb des Inspektors fahren. Die Breite und Höhe wird in Ihrem Browser neben der tatsächlichen SVG angezeigt.
- Wenn es mehrere Pfadelemente gibt, habe ich festgestellt, dass das letzte Element oft das "enthaltende" Element ist.
Bearbeiten Sie nun den SVG-Code direkt in Ihrem gewünschten Text-/Code-Editor. Sie ändern den Code nur innerhalb des svg-Element-Tags.
- Ändern Sie die Breiten- und Höhenattribute in die "tatsächlichen" Abmessungen, die Sie in Schritt 1 ermittelt haben.
- Ändern Sie die 4 Dimensionen des viewBox-Attributs. Keine Einheiten, nur die Zahlen (dh 10 nicht 10px) .
- Wir beginnen mit der 3. und 4. Zahl, die wiederum Ihre "tatsächliche" Breite und Höhe ist.
- Die 1. und 2. Dimension sind die X- und Y-Koordinaten für den "Ursprung" des Teils der SVG, der sich in der ViewBox befindet. Diese werden jeweils (von wahrscheinlich 0 0) in: die Hälfte der Differenz zwischen der ursprünglichen Breite und Höhe und der tatsächlichen Breite und Höhe geändert. Einfacher ausgedrückt (CSS): linker Rand und oberer Rand.
Verwirrt? Einfaches Schritt für Schritt
Dieses Beispiel macht es extrem einfach und verwendet das SVG direkt als Referenz. Wenn Sie genau dieses Beispiel durchgehen möchten, packen Sie den gesamten Code in die HTML-Tags <html> svg code </html> und öffnen Sie ihn in Ihrem Browser.
<svg xmlns="http://www.w3.org/2000/svg" width="48"
height="48" viewBox="0 0 48 48">
<path d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21
0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM12
18h24v4H12v-4zm16 10H12v-4h16v4zm8-12H12v-4h24v4z"/></svg>
+ Wir gehen davon aus, dass Sie Schritt 1 abgeschlossen haben und die "tatsächlichen" Abmessungen Ihrer SVG ohne Auffüllung ermitteln konnten. Für dieses Beispiel sind die tatsächlichen Abmessungen 40 x 40. Ändern Sie die SVG-Attribute entsprechend.
width="40" height="40"
+ Unsere ursprünglichen Abmessungen waren 48 x 48 und unsere tatsächlichen Abmessungen (ohne Polsterung) sind 40 x 40. Die Hälfte dieser Differenz beträgt 4 x 4. Ändern Sie das viewBox-Attribut entsprechend und fügen Sie unsere tatsächliche Breite und Höhe hinzu.
viewBox="4 4 40 40"
+ Unser Eröffnungs-svg-Tag sollte diese Änderungen jetzt widerspiegeln.
<svg xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="4 4 40 40">
+ Wenn die Auffüllung um Ihre SVG-Werte für oben/unten und rechts/links unterschiedlich ist, ist dies kein Problem. Folgen Sie einfach den Standardanweisungen oben und spielen Sie dann mit den ersten beiden Werten der viewBox -Eigenschaft, um zu verstehen, wie diese Werte das Bild entlang der X- und Y-Achse verschieben.
Ich habe das alles heute Abend gelernt, während ich mich mit demselben Thema befasste. Ganz offen für Vorschläge/Bearbeitungen von Personen, die mehr über das Bearbeiten skalierbarer Vektorgrafiken wissen als ich.
Sie können mit Fragmentbezeichnern genau das tun, was Sie wollen. Mit Fragment-IDs können Sie das Segment einer SVG-Datei definieren, das Sie in einem img-Tag anzeigen möchten, und die Bildtransformationen und das Seitenverhältnis steuern.
Durch Hinzufügen von #svgView(viewBox(0, 0, 32, 32)) am Ende Ihrer SVG-URL wird der Bereich in der SVG definiert, den Sie anzeigen möchten. Die ersten beiden Parameter sind die x- und y-Koordinaten der oberen linken Ecke Ihrer Viewbox und die zweiten beiden Parameter sind die Breite und Höhe Ihrer Viewbox.
Mit dieser Technik sehen Ihre img-Tags ungefähr so aus:
<img src="circos-table-image-medium.svg#svgView(viewBox(0, 0, 32, 32))" height=3500; width=3500; />
Es ist wichtig sicherzustellen, dass das Seitenverhältnis der Viewbox mit dem Seitenverhältnis des img-Tags übereinstimmt. Andernfalls wird Ihre Viewbox nicht richtig dimensioniert/ausgerichtet. Wenn Sie das Seitenverhältnis weiter steuern möchten, können Sie immer den Fragmentbezeichner preserveAspectRatioSpec verwenden.
Um die ViewBox für das gesamte Bild zu finden, rufen Sie die SVG-URL direkt auf und überprüfen Sie die Seitenelemente, um die im äußersten SVG-Element definierte ViewBox zu finden.
Mit diesen Informationen können Sie Ihre Viewbox jetzt an Ihre Bedürfnisse anpassen.
Verwenden Sie einfach Inkscape .
Ich empfehle zunächst, den Beitrag von David Rebd über das Anpassen der Abmessungen des SVG-Bildes über einen Texteditor (wie Notepad ++) zu lesen.
Klicken Sie dann in Inkscape einfach auf das Element, und Sie können die Abmessungen buchstäblich festlegen, ohne sich um das präzise Ziehen mit der Maus kümmern zu müssen.
Wenn die Symbolleiste fehlt, klicken Sie auf das Menü View, dann auf Show/Hide und aktivieren Sie die Tools-Steuerleiste.
Bevor Sie versuchen, das Problem mit Code zu beheben, sollten Sie versuchen, das SVG-Layout zu optimieren. Der in Inspector sichtbare weiße Raum verweist auf die Tatsache, dass das SVG nicht fest auf der Zeichenfläche festgelegt ist. Wenn Sie über Adobe Illustrator verfügen, öffnen Sie Ihre SVG-Datei darin. Sie sollten etwas Ähnliches sehen:
Der weiße Bereich ist Ihre Zeichenfläche, der Kreis Ihr SVG. Sie möchten sicherstellen, dass Ihre SVG-Datei die gleiche Größe wie die Zeichenfläche hat. Mit dieser Schaltfläche können Sie die Größe Ihrer Zeichenfläche ändern:
Wählen Sie das aus, wählen Sie Ihr weißes Quadrat aus, bringen Sie die Ränder an Ihren Kreis und speichern Sie Ihre SVG.
Die andere mögliche Korrektur für Ihre eigentliche SVG-Datei besteht möglicherweise darin, dass es eine Schnittmaske gibt, die die Größe der SVG-Grafik erweitert. In diesem Fall müssen Sie diese Masken nach Möglichkeit entfernen. Klicken Sie auf Ihren Kreis, um festzustellen, ob sich eine Schnittmaske auf Ihre SVG-Datei auswirkt. Wenn das umgebende Kästchen die Ränder Ihres Kreises bei der Auswahl nicht berührt, haben Sie eine Schnittmaske, die Ihre Bildgrenzen herausschiebt.
Wenn Sie Ihr Bild betrachten, ist dies möglicherweise sehr kompliziert. Wenn Sie sich mit der Vektorbearbeitung nicht so gut auskennen, kann es schneller und einfacher sein, das Bild an einen Designer weiterzugeben.
Führen Sie die Schritte 4, 11 und 12 unter https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape# aus, um Inkscape zuzuschneiden
Verwenden Sie danach im Menü "Bearbeiten" die Option "Seitengröße an Auswahl anpassen".