HTML マークアップで SVG を直接使用すると、ボタンに役割を割り当てたり、必要なホバー効果を付与したりすることができません

Question

2 つの機能を実行するアイコンが付いたコンテナーがあります:

1. ボタンのように機能します (キーボード/スクリーン リーダーなどを介してアクセス可能)
2. ホバー/フォーカス時に赤に変わります

SVG をマークアップ内で直接使用すると、ホバー効果は期待どおりに機能しますが、img タグを使用した場合のように SVG にボタンの役割を割り当てることができません。

リーリー リーリー

ただし、

img タグを使用すると、SVG の src 属性を使用してボタンの役割を img に割り当てることができますが、ホバー状態 予想される結果でダウンロードされました (SVG は独自のファイルに保存され、src で参照されます):

リーリー リーリー

誰か私にアドバイスをいただけますか?

Answer 1

SVG をドキュメントとして扱います。 に HTML ファイルを含める場合、そのフレーム内の CSS は編集できません。 SVG src コードの代わりに img として含めると、src ドキュメントから画像を直接取得します。

ただし、CSS フィルター a> を使用すると、多数のクールな Photoshop スタイルの効果をブラウザーで直接適用できます。

リーリー リーリー