私の質問：

.svgファイルを取得してタグで使用するにはどうすればよいでしょうか?タグを使用した例で行ったのとは異なり<svg>、インタラクティブにスタイルを設定することもできます (ホバーなど) 。<img>

ゴール：

メインルートに各国の国旗を表示するサムネイル ビューを作成する (数は 149)'/'

問題：

Express コードにスタティック ルートを設定したので、すべてのフラグを使用できます。

サーバー.js:

クライアント側では、各 .svg ファイルを取得してコンポーネントにインライン化します。

私のReactコンポーネントは次のようになります:

MapThumbnail コンポーネント:

次のhtmlファイルがあります

そして、このようなsvg背景で:beforeを追加したいと思います

sprite.svg は、複数のアイコンを持つスプライトです。したがって、x 位置 = 135 のスプライトから特定のアイコンを受け取りたいと考えています。これは IE、Chrome、Firefox では完全に機能しますが、Edge では機能しません。svg と Edge の問題点は何ですか?

私はウェブサイトのユーザースタイルを書いています。ユーザーによる設定にはcss変数を使用しています。変数を含むインライン svg を使用して、ユーザーの好みのアクセント カラーに設定されたチェックマークを作成しようとしています。しかし、うまくいかないようです。

提供されたコードでは、var 関数に詰め込みましたが、ストロークの色を currentColor に設定し、要素の色を変数に設定しようとしました。マスクと背景色の設定は機能しますが、「純粋なインライン svg」ソリューションが必要です。

チェックマークはアクセントカラーにする必要があります。var() を入れるだけで設定すると、機能せず、透過的になります。興味深いことに、currentColor メソッドを使用すると、ストロークは黒になります。