参考記事1：https ://zongzi531.com/2020/12/16/img%E6%A0%87%E7%AD%BE%E4%BD%BF%E7%94%A8svg%E5%90%8E% E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98%E9%A2%9C%E8%89%B2/参考記事2：https
: //www.cnblogs.com/ slongs/p/11377817.html
フィルターや影+ディスプレイスメントなど色々試しましたが、理想的な効果が得られず、最終的に記事2の方法を使いました。注入により色が直接変更されます。
ダウンロードリンク: https://download.csdn.net/download/kuilaurence/87681155
使い方：
実際の効果としては、最終的にsvgファイルをhtmlに直接インポートしていることが分かりますので、色の変更などの操作が非常に便利です; 使用する際はimg付箋にοnlοadを追加する
だけです制御対象のSVG画像がある場所= "SVGInject(this)"
<!DOCTYPE html>
<html>
<head>
<title>SVG交互示例</title>
<style>
svg:hover rect,
svg:hover path {
stroke: red;
}
h1::before {
content: "!";
}
h1::after {
content: "→";
}
ol li::marker {
content: counter(list-item) ". ";
counter-increment: list-item;
}
</style>
</head>
<body>
<h1>SVG交互示例</h1>
<img src="./icon.svg" alt="SVG图像" onload="SVGInject(this)" width="200" height="200" />
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</body>
<script src="./svg-inject.js"></script>
</html>
疑似クラスの学習:
CSS の疑似クラスは、要素にスタイルを適用するために要素の特定の状態または位置を選択するために使用されます。一般的に使用される CSS 疑似クラスをいくつか示します。
:hover - マウスが要素の上にあるときにスタイルを適用します。
:active - ユーザーが要素をクリックしてマウスまたは指を押したままにすると、スタイルが適用されます。
:focus - 要素にフォーカスがあるとき、たとえばユーザーが要素をタブ移動するかクリックするとき、スタイルを適用します。
:visited - 訪問済みのリンクを選択します。
:link - 未訪問のリンクを選択します。
:first-child - 親要素の最初の子を選択します。
:last-child - 親要素の最後の子を選択します。
:nth-child(n) - 親要素の n 番目の子を選択します。
:nth-last-child(n) - 親要素の最後の n 番目の子を選択します。
上記の疑似クラスに加えて、::before および ::after 疑似要素セレクターなど、より具体的なセレクターに使用できる他の疑似クラスもあります。これらは、コンテンツの前後にコンテンツを挿入するために使用できます。要素。フォーム要素のプレースホルダー テキストを選択するために使用できる ::placeholder 疑似クラス セレクターもあります。
:nth-of-type(n) - 親要素内の特定の型の n 番目の子を選択します。たとえば、:nth-of-type(2) は親要素の 2 番目の p 要素を選択します。
:nth-last-of-type(n) - 親要素内の型の最後の n 番目の子を選択します。
:first-of-type - 親要素内の特定の型の最初の子要素を選択します。
:last-of-type - 親要素内の特定の型の最後の子要素を選択します。
:only-child - 親要素内の唯一の子要素を選択します。
:only-of-type - 親要素内の特定の型の子要素のみを選択します。
:not(selector) - 指定されたセレクターに一致しないすべての要素を選択します。
:checked - チェックされたラジオまたはチェックボックスを選択します。
:disabled - 無効なフォーム要素を選択します。
:enabled - 使用可能なフォーム要素を選択します。
:empty - 子のない要素を選択します。
:target - 現在アクティブなアンカー ターゲット要素を選択します。
これらの CSS 疑似クラスは、より正確な要素セレクターに使用できるため、開発者は要素にスタイルをより簡単に適用し、より豊かなインタラクティブな効果を実現できます。
::before と ::after は CSS の疑似要素セレクターであり、開発者はこれを使用して要素の前後にコンテンツを挿入し、これらのコンテンツのスタイルを定義できます。これらの疑似要素は、テキストの前後に装飾記号を追加したり、リンクにアイコンを追加したりするなど、多くの興味深い効果を実現できます。
::before および ::after 疑似要素を使用するには、挿入されるコンテンツを定義する CSS の content プロパティを使用する必要があります。たとえば、次のスタイルはすべての h1 要素の前に感嘆符を挿入します。
h1::before { content: “!”; } content 属性は、テキスト文字列、属性値、カウンターなど、さまざまなタイプの値を受け入れることができます。ここではいくつかの例を示します。
/* すべてのリンクの後に矢印アイコンを追加します*/
a::after { content: “→”; }
/* 属性値を使用して画像を挿入 */
div::before { content: url(“path/to/image.png”); }
/* 数値を挿入するにはカウンターを使用します*/ ol
li::before { content: counter(list-item) "."; counter-increment: list-item ; コロン)、疑似クラス セレクターで使用される単一のコロンではなく。一部の古いブラウザでは、疑似要素セレクターを示すために単一のコロンが使用される場合があります。ただし、互換性を高めるために、二重コロン表記を使用することをお勧めします。
さらに、::before および ::after 疑似要素はデフォルトでインライン要素であり、CSS 表示プロパティを使用してブロックレベル要素または他のタイプの要素に変換できます。たとえば、次のスタイルは、ブロックレベル要素として宣言された画像をすべての段落の前に挿入します。
p::before { content: url("path/to/image.png"); display: block; }要約すると、::before および ::after 疑似要素セレクターは、追加のコンテンツを要素に追加する場合に非常に役立ちます。およびスタイルを使用して、より豊かなページ効果を実現します。