CSSを使用してSVGをスタイリングするには、最初にSVGをHTMLにインラインに埋め込む必要があります。 1。INLINESVGを使用すると、やなどの內(nèi)部要素を直接選択し、CSSを介してスタイルを適用できますが、外部SVGは幅や高さやフィルターなどのグローバルスタイルのみをサポートします。 2。.class：Hoverなどの通常のCSS構(gòu)文を使用してインタラクティブな効果を?qū)g現(xiàn)しますが、色の代わりに塗りつぶしを使用して色を制御し、ストロークとストローク幅を使用してアウトラインを制御します。 3.クラス名を使用してスタイルを整理して、重複を避け、競合と範(fàn)囲管理の命名に注意を払ってください。 4. SVGスタイルはページから継承され、svg * {fill：none;ストローク：なし; }予期しない結(jié)果を避けるため。これらの重要なポイントを習(xí)得した後、CSSを使用してSVGスタイルを制御できます。

SVGは最近、ロゴ、アイコン、イラストなどのどこにでもあり、大きな特典の1つは、HTML要素と同じようにCSSでスタイリングできることです。それらを柔軟で最新のWebデザインに簡単に統(tǒng)合できます。しかし、SVGにスタイルを適用しようとして問題に遭遇した場合、あなたは一人ではありません。知っておくべきいくつかのゴッチャがあります。

インラインSVGと外部SVG

ページにSVGをどのように含めるかは、スタイルのスタイルに影響します。

• インラインSVG ：これは、実際の<svg></svg>コードをHTMLに直接貼り付けることを意味します。ここでの大きなプラスは、CSSで直接その要素（ <path></path> 、 <circle></circle>など）をターゲットにできることです。
• 外部SVG ：CSSで<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175211922987577.png" class="lazy" alt="スケーラブルベクターグラフィックス（SVG）にCSSスタイルを適用する" >タグまたは背景畫像を介してSVGをロードしている場合、內(nèi)部要素への直接アクセスが失われます。この場合、外部から幅、高さ、フィルターなどのグローバルスタイルのみを適用できます。

したがって、SVG內(nèi)の色、アニメーション、またはホバーエフェクトを細(xì)かく制御したい場合は、インラインになります。

CSSを使用したSVG要素のスタイリング

SVGがインラインになったら、スタイリングに関しては、通常のHTMLのような要素の多くを扱うことができます。

たとえば、メインの形狀をホバーで色を変更するロゴがある場合があります。

 <svg>
  <path class = "logo-main" d = "m10 10 ..." />
</svg>

そしてあなたのCSSで：

 .logo-main {
  塗りつぶし：＃333;
}

.logo-main：Hover {
  塗りつぶし：＃09f;
}

いくつかの重要なポイント：

• 形やパスには、 colorやbackground-colorの代わりにfillを使用します。
• strokeは概要を制御し、 stroke-width厚さを調(diào)整します。
• これらのプロパティを遷移またはキーフレームでアニメーション化することもできます。

一部の古いブラウザーは、SVGに適用される特定のCSS機(jī)能に対するサポートが限られている可能性があることに留意してください。

クラスとスコープスタイルを使用します

HTMLと同様に、SVG內(nèi)のクラスを使用してスタイルを整理し、自分自身を繰り返すことを避けることができます。

SVGに複數(shù)の部分があるとしましょう。

 <svg>
  <circle class = "dotプライマリ" cx = "50" cy = "50" r = "10" />
  <circle class = "dot secondary" cx = "100" cy = "50" r = "10" />
</svg>

CSSで再利用可能なスタイルを定義できます。

 .dot {
  遷移：0.3秒の容易さを埋めます。
}

。主要な {
  塗りつぶし：赤;
}

.secondary {
  塗りつぶし：青;
}

いくつかのヒント：

• クラス名がページ上の他のスタイルと衝突しないことを確認(rèn)してください。
• 必要に応じて、SVGをコンテナに包み、スコープスタイルを使用することを検討してください。
• BEMまたは同様の命名規(guī)則は、物事を整理するのに役立ちます。

このアプローチは、特にSVGがより複雑になるにつれて、コードを清潔で保守可能に保ちます。

特異性と継承に注意してください

SVG要素は、ページからスタイルを継承できますが、これは便利ですが、混亂することもあります。

たとえば、 <svg>要素自體にfill色を設(shè)定すると、獨(dú)自のfillのない子要素が自動(dòng)的にそれを選択します。それはテーマに役立ちます：

 svg {
  塗りつぶし：CurrentColor;
}

その後、他の場所でcolorプロパティを変更するだけで、SVGが続きます。

しかし、これは、セレクターの特異性や競合するルールに注意しないと、予期しない結(jié)果がポップアップできることを意味します。良いトリックは、必要に応じて継承されたスタイルをリセットすることです。

 svg * {
  塗りつぶし：なし;
  ストローク：なし;
}

そうすれば、あなたは新鮮に始めて、あなたが望むものを正確に定義します。

基本的にそれだけです。 CSSを使用したSVGのスタイリングは、それがどのように機(jī)能するかを知ると強(qiáng)力ですが、SVG屬性がCSSプロパティにどのようにマップされ、ファイルがページに含まれるかに注意が必要です。

以上がスケーラブルベクターグラフィックス（SVG）にCSSスタイルを適用するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。