So fügen Sie SVG -Formen einen Doppelrand hinzu

Nehmen wir an, jemand fordert Sie auf, einigen zufälligen geometrischen SVG -Formen einen doppelten Rand hinzuzufügen. Aus irgendeinem Grund können Sie keinen Grafikeditor verwenden - sie müssen zur Laufzeit generiert werden -, sodass Sie ihn mit CSS oder innerhalb der SVG -Syntax lösen müssen.

Ihre erste Frage könnte sein: Gibt es so etwas wie Schlaganfallstil: Double in SVG? Nun, die Antwort ist noch nicht und es ist nicht so einfach. Aber ich werde es trotzdem versuchen zu sehen, welche Methoden ich aufdecken kann. Ich werde die Möglichkeiten von drei verschiedenen Grundformen untersuchen: Kreis, Rechteck und Polygon. Zeigen Sie diejenigen, die eine transparente Farbe in der Mitte der beiden Linien halten können.

Spoiler -Alarm: Alle Ergebnisse haben ihre Nachteile, zumindest mit CSS und SVG, aber lassen Sie mich Sie durch meine Absichten führen.

Die einfachen Lösungen

Diese funktionieren nicht mit allen Formen, aber die einfachsten Lösungen.

Umriss und Box-Shadow

Die CSS Properties-Umriss und Box-Shadow gelten nur für den Begrenzungsbox der Form oder SVG, und beide sind großartige Lösungen nur für Quadrate und Rechtecke . Sie ermöglichen auch flexible Farben mit benutzerdefinierten Eigenschaften.

Es dauert nur zwei CSS -Linien mit Umriss und hält die Hintergrundfarbe durch die Form sichtbar.

• ? Lösung nur für eine Form.
• ✅ Einfacher Code
• ✅ Grenzen sind glatt
• ✅ Transparenter Hintergrund

Box-Shadow benötigt nur eine CSS-Linie, aber wir müssen sicherstellen, dass jede Form ihren eigenen SVG hat, da wir Box-Shadow nicht direkt auf die Formen auftragen können. Eine andere Sache zu berücksichtigen ist, dass wir die Farbe des Hintergrunds in der Erklärung anwenden müssen.

• ? Lösung nur für eine Form
• ✅ Einfacher Code
• ✅ Grenzen sind glatt
• ? Kein transparenter Hintergrund

SVG -Gradienten

SVG -Radialgradienten funktionieren nur an Kreisen ☺️. Wir können den Gradienten direkt auf den Schlaganfall anwenden, aber es ist besser, Variablen zu verwenden, da wir die Farben viele Male im Code deklarieren müssen.

• ? Lösung nur für eine Form
• ✅ Einfacher Code
• ? Grenzen sind glatt
• ? Kein transparenter Hintergrund

Lösungen für alle Formen

Diese werden mit allen Formen funktionieren, aber der Code könnte aufgebläht oder komplex werden.

Filter: Drop-Shadow ()

Zum Schluss eine Lösung für alle Formen! Wir müssen jede Form in seiner eigenen

• ✅ Eine Lösung für alle Formen
• ✅ Einfacher Code
• ? Grenzen sehen pixeliert aus
• ? Kein transparenter Hintergrund

SVG -Filter

Dies ist eine sehr flexible Lösung. Wir können einen Filter erstellen und durch das Filterattribut von SVG zu den Formen hinzufügen. Der komplizierte Teil hier ist der Filter selbst. Wir werden drei Gemälde benötigen, eine für die Außengrenze, einen für die Hintergrundflut und die letzte, die die Form auf der Vorderseite malt. Das Ergebnis sieht besser aus als Drop-Shadow, aber die Grenzen sind immer noch pixeliert.

• ✅ Eine Lösung für alle Formen
• ? Komplexer Code
• ? Grenzen sehen pixeliert aus
• ? Kein transparenter Hintergrund

Formen wiederverwenden

Hier gibt es einige mögliche Optionen.

Option 1: Transformationen

Diese Lösung erfordert Transformationen. Wir platzieren eine Figur über die andere, in der die Hauptfigur eine Füllfarbe und eine Schlaganfallfarbe hat und die andere Figur keine Füllung, einen roten Schlaganfall hat und in das Zentrum skaliert und neu positioniert wird. Wir haben unsere Formen auf der definiert. Der Trick besteht darin, die Hälfte der Viewbox in den negativen Raum zu übersetzen, damit wir, wenn wir sie skalieren, dies aus der Mitte der Figur tun können.

• ✅ Eine Lösung für alle Formen
• ? Duplizierter Code
• ✅ Grenzen sind glatt
• ✅ Transparenter Hintergrund

Option 2:

Ich fand eine clevere Lösung in der mailing-Liste der WWW-SVG von Doug Scheper, die SVG verwendet. Auch hier müssen die Formen einmal definiert und zweimal mit bezogen. Diesmal hat die Hauptform einen größeren Schlaganfall. Der zweite ShapeHashalfthestroke der Hauptform, keine Füllung, ANDA -Schlaganfall, die der Hintergrundfarbe entspricht.

• ✅ Eine Lösung für alle Formen
• ? Duplizierter Code
• ✅ Grenzen sind glatt
• ? Kein transparenter Hintergrund

Hier sind die vollständigen Ergebnisse!

Nur damit du sie alle an einem Ort hast. Lassen Sie mich wissen, dass Sie sich andere mögliche Lösungen vorstellen können!

Das obige ist der detaillierte Inhalt vonSo fügen Sie SVG -Formen einen Doppelrand hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!