So verwenden Sie SVG-Symbole in WeChat-Applets

SVG wurde in den letzten Jahren aufgrund seiner verschiedenen Vorteile häufig verwendet. Leider unterstützen WeChat Mini-Programme die Verwendung von SVG in Form von XML bisher nicht, was die Flexibilität von SVG erheblich einschränkt. Die meisten Leute verzichten auf die Verwendung von SVG-Symbollösungen in WeChat Mini-Programmen.
Gibt es also wirklich keine Möglichkeit, SVG-Symbole problemlos in WeChat-Applets zu verwenden? Lassen Sie uns zunächst analysieren, welche Anforderungen wir für die Verwendung von SVG-Symbolen haben:

• Kann zur Verwendung eingeführt werden
• Möglichkeit zur Farbanpassung

Zunächst einmal gibt es mit dem ersten Punkt kein Problem. Das WeChat-Applet unterstützt die Einführung von SVG in Form von Image.src. Der nächste Teil ist der Kernteil dieses Artikels: Wie man SVG im Bildformat dazu bringt, die Farbe zu ändern.

Bei meiner jüngsten CSS-Studie habe ich festgestellt, dass es eine Eigenschaft gibt, die einen Schatten auf den nicht transparenten Teil des DOM werfen kann. Diese Eigenschaft heißt „Drop-Shadow“ und ihr Wert ähnelt in etwa dem von „Box-Shadow“. Mit diesem Attribut können wir einen Schatten mit einer veränderbaren Farbe für das SVG-Bild werfen und dann den Originalteil ausblenden, um ein SVG-Symbol mit veränderbarer Farbe zu realisieren.

Als nächstes üben wir es. Konstruieren Sie zunächst die DOM-Struktur:

<Ansichtsklasse="svg_icon">
 <image class="svg_icon-inner" src="/Pfad/icon.svg"/>
</Ansicht>

Fügen Sie als Nächstes das CSS hinzu:

.svg_icon {
 Anzeige: Inline-Flex;
 Breite: 1em;
 Höhe: 1em;
 Überlauf: versteckt;
}

.svg_icon-inner {
 Breite: 1em;
 Höhe: 1em;
 transformieren: übersetzenY(-1em);
 Filter: Schlagschatten (0 1em 0 aktuelle Farbe);
}

Lassen Sie mich erklären, warum die DOM-Struktur und CSS folgendermaßen eingerichtet sind: Erstens ist svg_icon der Container des gesamten Symbols, der für die Einstellung der Symbolgröße (1em = Schriftgröße des übergeordneten Containers) und das Ausblenden des überschüssigen Teils (d. h. des ursprünglichen Teils des Symbols) verantwortlich ist, während svg_icon-inner für das Rendern von SVG und das Werfen farbiger Schatten verantwortlich ist. Indem svg_icon-inner auf dieselbe Breite und Höhe wie der übergeordnete Container eingestellt und ein Versatz in die entgegengesetzte Richtung der Projektion festgelegt wird, kann die erforderliche Änderung der SVG-Farbe erreicht werden (wenn die Projektionsfarbe auf currentColor eingestellt wird, kann die Symbolfarbe mit der Schriftfarbe des übergeordneten Containers geändert werden).

Diese Lösung hat einen Nachteil. Wenn auf der Seite eine Transformationsanimation vorhanden ist und diese ausgelöst wird, flackert das Symbol. Ich bin mir über den genauen Grund nicht sicher. Ich hoffe, jemand kann mir einen Rat geben.

Damit ist dieser Artikel über die Verwendung von SVG-Symbolen in WeChat-Miniprogrammen abgeschlossen. Weitere Informationen zur Verwendung von SVG-Symbolen in WeChat-Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!