CSSガイドのSVGプロパティ-CSSチュートリアル-php.cn

このガイドでは、CSSプロパティを使用してSVG要素のスタイリングに焦点を当てたCSSとスケーラブルベクトルグラフィックス（SVG）の交点を調査します。多数のSVG属性が存在しますが、特定のSVG属性（主にプレゼンテーション属性）のみがCSSで直接スタイルを整えることができます。一部のCSSプロパティはSVG（ font-sizeやopacityなど）と共有されますが、SVG固有のものもあります。

たとえば、要素を赤に色付けするために、 fillはプレゼンテーション属性であるためfill CSSで機能します。

丸 {
  塗りつぶし：赤;
}

ログイン後にコピー

このガイドでは、利用可能なSVG要素と対応するCSSプロパティを包括的に詳しく説明し、一般的なスタイルやアニメーションなどのさまざまなスタイリングテクニックをカバーしています。

SVG要素とCSSプロパティ：分類された概要

次の概要は、CSSプロパティとして使用可能なプレゼンテーション属性を概説し、明確に分類されます。非推奨要素は除外されます。

CSSおよびSVG共有プロパティ

フォントプロパティ

テキストプロパティ

マスキングプロパティ

インタラクティブ性のプロパティ

カラープロパティ

可視性プロパティ

SVG固有のCSSプロパティ

テキストプロパティ

クリッププロパティ

マスキングプロパティ

フィルター効果

勾配特性

インタラクティブ性のプロパティ

カラープロパティ

塗装特性

SVG 2およびCSSスタイリング

プレゼンテーションの属性は、CSSとSVGスタイリングのギャップを埋める一方で、SVG 2（現在候補の推奨事項中）はこの相互作用を大幅に強化し、CSSを使用した要素座標と寸法の制御を可能にします。

SVG 2仕様が明確になります：

「一部のスタイリングプロパティは、スタイルシートや「スタイル」属性だけでなく、プレゼンテーション属性でも指定できます。これらは、特定のCSSプロパティと一致し、その値がそのプロパティの値として解析される属性です。」

これは、以下のような擬似クラスを含むCSSを意味します:hover and :active 、Can Style SVGプロパティは、プレゼンテーション属性またはStyleSheetsを使用します。 SVG 2は、スタイリングの追加のプレゼンテーション属性も導入しています。完全なリストについては、SVG 2仕様を参照してください。

要素固有のプロパティサポート

CSSプロパティサポートはSVG要素によって異なることを覚えておくことが重要です。特定のプロパティは要素固有です。例えば、<circle></circle>そして<ellipse></ellipse>cx 、 cy 、 rx 、およびryをサポートしますが、他の要素はそうではないかもしれません。

ジオメトリプロパティ

SVG 2は、 rxやryなどのプロパティをジオメトリプロパティとして定義します。これは、CSSでスタイル可能であり、 fillやstrokeなどのプレゼンテーション属性とともにスタイリング可能です。

CSSを使用したSVG要素の配置（SVG 2）

SVG 2は、CSSベースのポジショニングを可能にします。長方形を考えてみましょう：

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

ログイン後にコピー

SVG 2を使用すると、 xおよびy属性をCSSを介して制御できます。

 / * SVG 2で動作します */
rect {
  X：10;
  Y：10;
  / * ...その他のスタイル... */
}

ログイン後にコピー

SVGマークアップを単純化します。

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

ログイン後にコピー

同様に、CSSを使用してwidthとheight設定することができ、SVGコードをさらに最小化できます。

現在、Blink（Chrome、Opera）およびWebKit（Safari）ブラウザは、これらのSVG 2機能をよりよくサポートしています。より広い互換性には、代替手法が必要です。

CSSを使用したSVG形状のモーフィング

CSSを使用して、形状モーフィング効果を作成できます。関係するSVGパスには、モーフィングを成功させるには、同一のコマンドと同じ数のポイントが必要です。

例：三角形を正方形にモーフィングします。

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

ログイン後にコピー

パスをオーバーライドするCSS：

パス {
  D：PATH（ "M150、10 L40、200 L260、200Z"）; / *初期形状 */
  塗りつぶし：＃4c6edb;
}

パス：アクティブ{
  D：PATH（ "M10,10 L160,10 L160,160 L10,160 Z"）; / *形状のモーフィング */
  塗りつぶし：＃4c6edb;
  遷移：0.35秒の容易さ。
}

ログイン後にコピー

SVGマークアップは次のことを簡素化します

<svg height="220" width="300"><path></path></svg>

ログイン後にコピー

SVGプロパティをCSSでアニメーション化します

CSSアニメーションとトランジションは、SVGプロパティをアニメーション化します。この例は、5つの円の波のアニメーションを示しています。

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

ログイン後にコピー

変数を備えたCSSおよび:nth-child() ：

 / * ...色と初期サークルスタイルのCSS ... */

。形 {
  / * ...初期スタイル... */
  アニメーション：MoveCircle 1250msの容易な両方の無限。
}

/ * ...各円のアニメーション - デレイ... */

@KeyFrames MoveCircle {
  50％{
    Cy：150;
    R：13;
  }
}

ログイン後にコピー

内部のアニメーション<pattern></pattern>要素も可能です。