動的な色切り替えの実装コードをサポートするために、CSS で SVG 画像を参照します。

表示する svg 画像を追加すると、React はファイルが見つからないというメッセージを表示します。

グローバルファイル global.d.ts にイメージタイプの宣言を追加できます。

詳細については、「TypeScript でリソースファイルを参照した後に見つからないというメッセージが表示される」を参照してください。

宣言後、参照はエラーを報告しません。次に、色やその他の設定が含まれる svg 画像を確認します。

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<svg 幅="24px" 高さ="24px" ビューボックス="0 0 24 24" バージョン="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>ウィンドウ_リターン</title>
    <g id="control" ストローク="なし" ストローク幅="1" 塗りつぶし="なし" 塗りつぶしルール="偶奇">
        <g id="window_return">
            <rect id="Rectangle-6" fill="#D8D8D8" 不透明度="0" x="0" y="0" 幅="24" 高さ="24"></rect>
            <path d="M8.35417135,12.9957726 C8.13320936,12.7345458 8,12.3967967 8,12.0279541 C8,11.6586058 8.13357489,11.3204363 8.3550807,11.0590615 L8.3521103,11.0564202 L14.356041,4.51971371 L14.3599873,4.52318728 C14.635253,4.20288524 15.0434555,4 15.4990737,4 C16.3280124,4 17,4.67157288 17,5.5 C17,5.8870199 16.8533375,6.23980607 16.6125263,6.50587693 L16.6210783,6.51340439 L11.5390798,12.0228281 L16.5124905,17.3935277 C16.8121157,17.6677653 17,18.0619548 17,18.5 C17,19.3284271 16.3280124,20 15.4990737,20 C15.0262153,20 14.6044287,19.7814702 14.3293154,19.439953 L8.35278214,12.9970098 L8.35417135,12.9957726 L8.35417135,12.9957726 Z" id="Oval-43-Copy-3" fill="#808080"></path>
        </g>
    </g>
</svg>

SVG に基づいて異なる効果を表示することは可能ですか?たとえば、マウスオーバー後にハイライトする

理論的には、XML コード解析を追加し、SVG レンダリングをコンポーネントとして追加することは可能です。

インターネットを閲覧した後、それらのほとんどはあまり実用的ではないことがわかりました。それらの多くはグローバルイメージをロードし、それらを個別のコンポーネントまたはキャッシュとして使用しますが、これは適切ではありません。

反応インラインvg

かなり良いオープンソースを見つけました。とても良いので、お勧めです!

https://github.com/gilbarbara/react-inlinesvg

インストール: npm i react-inlinesvgまたはyarn addreact-inlinesvg

参照を追加します: import SVG from 'react-inlinesvg';

写真を追加:

'../../../../assets/images/back.svg' から BackPng をインポートします。
<SVG className="backIcon" src={BackPng} />

動的スタイルを設定するには:

&:ホバー{
    パス {
      塗りつぶし: #4ecb78;
    }
    .backContent{
      色: #4ecb78;
    }
  }
  ＆：アクティブ {
    パス {
      塗りつぶし: #2baf57;
    }
    .backContent{
      色: #2baf57;
    }
  }

これで、CSS で svg 画像を参照して動的なカラー切り替えをサポートする実装コードに関するこの記事は終了です。より関連性の高い css svg 動的なカラー切り替えコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロールバーの表示、div の非表示、イベントバブリングの無効化など)

>>: JavaScript プロトタイプの詳細