WeChatアプレットでSVGアイコンを使用する方法

SVG は、さまざまな利点があるため、近年広く使用されています。残念ながら、WeChat ミニプログラムは、これまでのところ XML 形式の SVG の使用をサポートしていないため、SVG の柔軟性が大幅に低下しています。ほとんどの人は、WeChat ミニプログラムで SVG アイコンソリューションの使用をあきらめています。
では、WeChat アプレットで SVG アイコンを快適に使用する方法は本当にないのでしょうか?まず、SVG アイコンを使用するための要件を分析しましょう。

導入して活用できる
色を調整する機能

まず、1点目については問題ありません。WeChatアプレットはImage.src形式でのSVGの導入をサポートしています。次の部分はこの記事の重要な部分であり、画像形式の SVG の色を変更する方法について説明します。

最近 CSS を勉強していたところ、DOM の不透明部分に影を落とすことができるプロパティがあることに気付きました。このプロパティは drop-shadow で、その値は box-shadow とほぼ同じです。この属性を使用すると、SVG 画像に変更可能な色の影を付けることができ、元の部分を非表示にして変更可能な色の SVG アイコンを実現できます。

次に、実践してみましょう。まず、DOM 構造を構築します。

<view class="svg_icon">
 <image class="svg_icon-inner" src="/path/icon.svg"/>
</ビュー>

次に、CSS を追加します。

.svg_アイコン {
 ディスプレイ: インラインフレックス;
 幅: 1em;
 高さ: 1em;
 オーバーフロー: 非表示;
}

.svg_アイコンインナー {
 幅: 1em;
 高さ: 1em;
 変換: translateY(-1em);
 フィルター: ドロップシャドウ(0 1em 0 現在の色);
}

DOM 構造と CSS がこのように設定されている理由を説明します。まず、svg_icon はアイコン全体のコンテナーであり、アイコンサイズ (1em = 親コンテナーのフォントサイズ) の設定と余分な部分 (つまり、アイコンの元の部分) の非表示を担当します。一方、svg_icon-inner は SVG のレンダリングと色付きの影の投影を担当します。svg_icon-inner を親コンテナーと同じ幅と高さに設定し、投影の反対方向にオフセットを設定することで、SVG の色を変更する必要性を実現できます (投影色を currentColor に設定すると、アイコンの色を親コンテナーのフォント色に合わせて変更できます)。

このソリューションには欠点があります。ページに変換アニメーションがあり、それがトリガーされると、アイコンがちらつきます。具体的な理由はわかりません。どなたかアドバイスをいただければ幸いです。

これで、WeChat ミニプログラムで SVG アイコンを楽しく使用する方法についての記事は終了です。WeChat ミニプログラムで SVG アイコンを使用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: