スケーラブル ベクター グラフィックス (SVG) は、損失なく任意のサイズに変更できる高品質のベクター グラフィックスを生成できる形式として広く普及しています。 SVG を使用する追加の利点は、特定の設定に基づいてグラフィックスの色を変更できることです。 Web サイトのトーンを調整したり、特定の目的に合わせてカラー パレットを微調整したりする場合は、CSS を使用して SVG の色を簡単に変更できます。この記事では、特定の要素の特定から色自体の調整まで、SVG の色を変更する手順を段階的に説明します。あなたが Web デザイナー、開発者、または SVG グラフィックをパーソナライズしたい好奇心旺盛な学習者であっても、この記事は、その旅を始めるために必要なすべての知識を提供することを約束します。
CSS は Cascading Style Sheets の略で、HTML のスタイルを設定するための影響力のあるツールであり、SVG グラフィックのスタイルを変更するためにも使用できます。 SVG の色を変更するには、CSS セレクターを使用して、変更する必要がある正確な要素をターゲットにすることができます。たとえば、SVG 内のすべてのパスの塗りつぶしの色を変更したい場合は、次の CSS ルール -
を使用できます。 リーリーこれにより、SVG 内のすべてのパスの塗りつぶしの色が赤に変更されます。 CSS を使用して、SVG 内の特定の要素を ID またはクラスでターゲットにすることもできます。
SVG 要素の色合いを、色合い、16 進数システム、RGB、RGBA、HSL、HSLA、またはその他の許可された色標準のカスタム タグであるかどうかに関係なく、公式に許可された CSS 色合いに変更することができます。たとえば、パス内の色を従来の色相 (「verdant」など) または 16 進コード (「#ff0000」など) に変更できます。 「rgb(255, 0, 0)」や「hsl(0, 100%, 50%)」など、RGB または HSL 値を使用して正確な色相を指定することもできます。 SVG 要素の塗りつぶしの色合いを調整することに加えて、fill プロパティの代わりにストローク プロパティを使用してストロークの色合いを変更することもできます。
一部の SVG ファイルにはインライン スタイルまたはハードコードされた色が含まれている場合があり、定義した CSS ルールをオーバーライドする可能性があることに注意してください。この場合、これらのスタイルや色を削除するために SVG ファイルを変更する必要がある場合があります。これを行うには、SVG ファイルをテキスト エディタで開き、変更する色の値を見つけます。関連するスタイルや色を見つけたら、それらを削除したり、好みに合わせて調整したりできます。ただし、SVG の機能に影響を与える可能性のある重要なコードやタグを削除しないように注意する必要があります。
＃＃＃方法＃＃＃色を変更したい特定の SVG 要素を特定することが重要です。これは、Web ブラウザの開発者ツールを使用して SVG 要素を検査することで実現できます。
特定の SVG 要素の色合いを変更するように設計された CSS ステートメントを作成します。 「svg」、「path」、「rect」などの要素セレクターを使用して特定の要素に焦点を当てたり、クラス セレクターや ID セレクターを使用して特定の要素をより詳細にターゲットにすることができます。
CSS 宣言で、お好みの色を fill プロパティに割り当てて、SVG の塗りつぶしの色を変更します。色名、16 進コード、または RGB 値を使用して色を表すことができます。
ストローク プロパティを指定して SVG ストロークの色を変更したり、他の CSS プロパティを使用して SVG を整形したりするオプションもあります。
外部 CSS ファイルを使用している場合は、HTML ドキュメントの head セクションの link 要素を使用して、そのファイルにリンクします。
変更を保存してページを更新すると、更新された SVG カラーが表示されます。
例 1
次の例は、JavaScript と CSS を使用して SVG グラフィックの色を動的に変更するプロセスを示しています。
以上がSVGの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
