SVG zeichnet eine adaptive Raute

Willkommen auf meinem öffentlichen Konto: Front-End-Detektiv

Kürzlich sah ich ein solches Problem in einem Denken: Es ist notwendig, eine Raute mit einer adaptiven Größe zu zeichnen, und es gibt auch einen Rand, der in Flussdiagrammen im Allgemeinen sehr häufig vorkommt, und der Effekt ist wie folgt

Wenn es keinen Rand gibt, verwenden SieCSS-Clip-PfadEs ist auch sehr praktisch, eine Raute auszuschneiden, aber der Rand ist nicht einfach zu handhaben (normalerweise wird er durch Verschachteln einer Ebene oder Projektion simuliert, aber der Effekt ist nicht sehr gut.) Hier ist eine SVG-Methode, die voll zum Tragen kommt der Zoomfunktion, um diesen Effekt zu erzielen

1. Woher kommt SVG?

SVG erfordert normalerweise keinen handschriftlichen Code (mit Ausnahme einiger Grundformen) und kann im Allgemeinen von Designsoftware generiert werden (SVG ist zu Beginn des Designs für Maschinen konzipiert, was für das menschliche Lesen sehr ungünstig ist). Zum Beispiel zeichne ich hier mit Figma (ein Polygon reicht), jede Größe reicht

Dann habe ich dieses SVG bekommen

<svg width="167" height="90" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码

Der Effekt im Browser ist wie folgt

Zweitens die Skalierungseigenschaften von SVG

Jetzt hat SVG eine Standardgröße, wenn Sie die Standardgröße von SVG wie folgt manuell ändern

Hat es eine ähnliche object-fit:containWirkung? Wenn Sie möchten, dass der gesamte Bürgersteig bedeckt ist, was sollten Sie mit der erzwungenen Dehnung tun? Hier müssen Sie das Zoom-Attribut von SVG verwendenAspectRatio beibehaltenviewBox, die die object-fitSkalierungsregel angibt, wenn die tatsächliche Größe des SVG nicht mit der Größe übereinstimmt, etwas ähnlich der object-positionKombination von und . Hier gibt es viele Werte, der Standardwert ist xMidYMid , was bedeutet, dass eine proportionale Skalierung und eine zentrierte Ausrichtung erzwungen werden.

Wenn Sie interessiert sind, können Sie auf diesen Artikel verweisen:Grundlegendes zu SVG-Ansichtsfenstern, ViewBox- und PreserveAspectRatio-Skalierungen, der Fall ist sehr detailliert

Hier brauchen wir keine proportionale Skalierung, wir können sie direkt auf keine setzen

<svg preserveAspectRatio="none">
...
</svg>
复制代码

Der Effekt ist wie folgt

3. SVG-Strichskalierung

Nach dem Einstellen der ungleichen Skalierung gibt es tatsächlich ein kleines Problem mit dem Strich: Bei unterschiedlichen Größen ist die Dicke des Strichs wie folgt unterschiedlich

Gibt es eine Möglichkeit, den Strich nicht mit den SVG-Abmessungen zu skalieren? Natürlich gibt es! Es gibt ein Attribut in SVGVektor-EffektSie können den Strich steuern, um nicht zu zoomen und immer die Standardgröße beizubehalten.Wenn Sie interessiert sind, können Sie auf diesen Artikel verweisenCSS-Vektoreffekt und SVG-Strich-Strich-Skalierung, hier müssen Sie nur die Attribute pathhinzufügen vector-effect="non-scaling-stroke", die angeben, dass der Strich nicht der Skalierung folgt, wie folgt

<svg preserveAspectRatio="none">
	<path vector-effect="non-scaling-stroke">...</path>
</svg>
复制代码

Auf diese Weise wird eine Raute mit adaptiver Größe realisiert, und der Strich wird nicht skaliert.Der vollständige SVG-Code lautet wie folgt

<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码

Viertens SVG Inline base64

Normalerweise eignet sich eine solche Grafik besser als Hintergrundbild (SVG-Code sieht auf der Seite nicht gut aus). Überraschenderweise sind die oben genannten Funktionen nach der Konvertierung des SVG in base64 immer noch vorhanden. Hier verwenden wir die von Herrn Zhang XinxuSVG-Online-Komprimierungs- und Zusammenführungstool,wie folgt

Verwenden Sie nach der Konvertierung einfach dieses base64 direkt als Hintergrund

div{
  background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
}
复制代码

Auf diese Weise wird ein adaptiver Rautenhintergrund erhalten.

Natürlich kann die Farbe nach der Konvertierung auf base64 nicht in Echtzeit geändert werden, sondern muss als Ganzes ersetzt werden

Auf den vollständigen Code kann zugegriffen werdenSVG-Diamant

Fünftens, um zusammenzufassen

An diesem Beispiel können wir die natürlichen Vorteile von SVG erkennen, insbesondere die Zoomfunktion des Strichs.Wenn Sie CSS verwenden, um ihn zu zeichnen, werden Sie voraussichtlich auf viele Probleme stoßen. Hier eine Zusammenfassung der Umsetzungspunkte:

1. SVG wird im Allgemeinen über eine Designsoftware gezeichnet und exportiert, es ist keine Handschrift erforderlich
2. SVG behält standardmäßig die Originalskalierung bei, und die Skalierungsregeln können mit "konserveAspectRatio" geändert werden
3. Die Dicke des SVG-Strichs wird standardmäßig mit der Gesamtgröße skaliert, und die Originalgröße kann durch die Vektoreffekt-Einstellung beibehalten werden
4. SVG hat nach der Umwandlung in base64 immer noch die oben genannten Eigenschaften und eignet sich besser als Hintergrundbild

SVG war beim Zeichnen von Grafiken immer vorteilhafter, insbesondere für solche geometrischen Formen, die flexibler in der Skalierung und anpassungsfähiger sind.Wenn die CSS-Implementierung schwierig ist, ziehen Sie SVG in Betracht. Schließlich, wenn Sie denken, dass es gut und hilfreich für Sie ist, bitte liken, bookmarken und weiterleiten ❤❤❤

Willkommen auf meinem öffentlichen Konto: Front-End-Detektiv