SVG 透過 CSS

SVG 透過 CSS：fill-opacityとfillで制御する

SVGの透過をCSSで制御する方法は、主にfill-opacityプロパティとfillプロパティを使用します。fill-opacityは塗りつぶし色の不透明度を調整し、fillは塗りつぶし色自体を指定します。これらを組み合わせることで、透明から半透明まで、さまざまな効果を簡単に表現できます。この記事では、これらのプロパティを使ったSVG透過の制御方法を詳細に解説します。

SVG透過 CSS：fill-opacityで不透明度を調整

fill-opacityプロパティは、SVG要素の塗りつぶし色の不透明度を調整します。このプロパティは、0.0から1.0までの数値で指定します。0.0は完全に透明で、1.0は完全に不透明です。

使用方法：

  • 数値指定: fill-opacity: 0.5; と指定すると、塗りつぶし色は50％の透明度になります（半透明）。
  • パーセント指定: fill-opacity: 50%; と指定することもできますが、パーセント指定が正しく動作しない場合があるため、数値での指定が推奨されます。

例：

css
/* 半透明の円を作成する */
circle {
  fill-opacity: 0.5; /* 塗りつぶし色の透明度を50％に */
}​

SVG透過 CSS：fillで透過を実現

fillプロパティを使用して、SVGの塗りつぶしを完全に透明にすることができます。透過にする方法として、fill: none;またはfill: transparent;を指定することで、塗りつぶし部分を完全に透明にできます。

使用方法：

  • fill: none;: 塗りつぶしを完全に無効化します。
  • fill: transparent;: 塗りつぶしを透明に指定します。

例：

css
/* 透過の長方形 */
rect {
  fill: none; /* 塗りつぶしなし（透明） */
}​

適用対象要素

fill-opacityとfillプロパティは、次のSVG要素に適用できます：

  • <circle> (円)
  • <ellipse> (楕円)
  • <path> (パス)
  • <polygon> (多角形)
  • <polyline> (ポリライン)
  • <rect> (長方形)
  • <text> (テキスト)
  • <textPath> (パスに沿ったテキスト)
  • <tref> (テキスト参照)
  • <tspan> (テキストスパン)

これらの要素に対して、透過や半透明の効果を適用できます。

使用例：半透明の円

次のコードでは、青い円が半透明で表示されます。

xml
<svg>
  <circle cx="50" cy="50" r="40" fill="blue" style="fill-opacity: 0.5;" />
</svg>​

ここでは、fill-opacityプロパティを使って、円の塗りつぶし色の透明度を50%に設定しています。これにより、円が半透明で表示されます。

使用例：透過の長方形

以下のコードでは、長方形の塗りつぶしが透明になり、枠線のみが表示されます。

xml
<svg>
  <rect x="10" y="10" width="80" height="80" style="fill: none;" />
</svg>​

ここでは、fill: none;を指定することで、長方形の塗りつぶしがなくなり、透明になります。

fill-opacityとfillの使い分け

  • fill-opacity: 半透明の色を指定するために使用します。例えば、色はそのままに透明度を調整する場合に便利です。
  • fill: noneやfill: transparent: 完全な透過を指定する場合に使用します。これらを使用すると、SVG要素の塗りつぶしが完全に透明になります。

例えば、背景を透過させたくないが、色を半透明にしたい場合にはfill-opacityを使用し、完全に透明にしたい場合はfill: noneやfill: transparentを使用します。

SVG透過 CSS：注意点

  • fill-opacityのパーセント指定 (fill-opacity: 50%) は、ブラウザによってサポートが異なる場合があります。そのため、数値での指定 (fill-opacity: 0.5) が一般的に推奨されます。
  • fill属性にnoneまたはtransparentを指定する場合、背景色やその他の要素が透過になるので、デザインによっては注意が必要です。

まとめ

CSSのfill-opacityとfillプロパティを使用することで、SVGの透過を柔軟に制御できます。半透明や完全透過などの効果を簡単に適用でき、Webデザインにおける表現の幅を広げることができます。これらのプロパティを駆使して、より洗練されたデザインを実現しましょう。

結論

SVGとCSSの組み合わせにより、視覚的に魅力的で動的なウェブコンテンツを作成することができます。透過効果は、その中でも特に強力なデザイン要素となります。さらなる学習のために以下のリソースを参照してください。

Q&A

Q1: SVGに透過効果を追加するにはどうすればよいですか？

A1: SVG内の要素にCSSのopacityプロパティを使用することで透過効果を追加できます。

Q2: SVGのフィルターは何に使いますか？

A2: SVGのフィルターは、ぼかしやシャドウなどの視覚効果をグラフィックスに追加するために使用します。

Q3: CSSでSVGの色を変更できますか？

A3: はい、CSSを使用してSVG要素の色を変更することができます。

その他の参考記事:svg 透過