SVGドロップシャドウ CSS3実装
SVGドロップシャドウのCSS3実装
SVG (Scalable Vector Graphics)はベクターグラフィック形式で、CSSと組み合わせて使用することで、さまざまな効果を施すことができます。その一つがドロップシャドウです。CSS3のfilterプロパティを利用することで、SVG要素にドロップシャドウを付けることができます。
HTMLの構造
まず、HTMLファイルでSVG要素を定義します。例えば、円形のSVG要素を作成する場合:
<svg width="300" height="300">
<circle cx="150" cy="150" r="50" fill="blue" />
</svg>
CSSのスタイル
次に、CSSファイルでSVG要素に対してfilterプロパティを設定します。drop-shadow関数を使用することで、ドロップシャドウの効果を適用できます。
svg circle {
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5));
}
この例では、水平方向に0ピクセル、垂直方向に2ピクセル、ぼかし半径を4ピクセル、色を半透明の黒（rgba(0, 0, 0, 0.5)）としたドロップシャドウを適用しています。
具体的なパラメータ
drop-shadow(offsetX, offsetY, blurRadius, color)offsetX: ドロップシャドウの水平方向のオフセット。blurRadius: ドロップシャドウのぼかし半径。color: ドロップシャドウの色。
複数のフィルターの組み合わせ
複数のフィルターを組み合わせることもできます。例えば、ドロップシャドウとぼかし効果を同時に適用するには:
svg circle {
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) blur(5px);
}
コード例1：基本的なドロップシャドウ
<svg width="300" height="300">
<circle cx="150" cy="150" r="50" fill="blue" />
</svg>
svg circle {
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5));
}
- CSS
svg circle: SVG内の全ての円要素にスタイルを適用します。
- HTML
svg要素: SVG画像全体を囲むコンテナです。widthとheight属性でサイズを指定します。circle要素: 円を描画します。cxとcy属性で円の中心の座標、r属性で半径、fill属性で塗りつぶしの色を指定します。
svg circle {
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) blur(5px);
}
blur(5px): ドロップシャドウに加えて、ぼかし効果を5ピクセル適用します。
コード解説のポイント
- 複数のフィルター
filterプロパティには複数のフィルターをスペースで区切って指定できます。 - rgba関数
赤、緑、青、透明度の4つの値で色を指定します。 - drop-shadow関数
影のオフセット、ぼかし半径、色を指定します。 - filterプロパティ
SVG要素に様々な視覚効果を適用できます。drop-shadow関数はその一つで、影効果を作成します。
より高度な使い方
- 他のフィルターとの組み合わせ
blur以外にも、grayscale,sepiaなどのフィルターと組み合わせることができます。 - 影の調整
パラメータを調整することで、影の濃さ、大きさ、色を細かく調整できます。 - 複数のSVG要素への適用
クラス名やIDを使って、特定のSVG要素にのみスタイルを適用できます。
CSS3のfilterプロパティを使うことで、SVG要素に簡単にドロップシャドウを付けることができます。この技術を使うと、より奥行きのあるデザインを作成することができます。
box-shadowプロパティはSVG要素には直接適用できません。- SVGファイル内に直接CSSを書くことも可能です。
SVG内部でのフィルター定義
SVGには、<filter>要素を用いて、カスタムフィルターを定義することができます。この方法では、CSSではなくSVGファイル自体にフィルター効果を記述します。
<svg width="300" height="300">
<defs>
<filter id="myShadow">
<feDropShadow dx="2" dy="2" stdDeviation="4" />
</filter>
</defs>
<circle cx="150" cy="150" r="50" fill="blue" filter="url(#myShadow)" />
</svg>
- デメリット
- 可読性: CSSよりもSVGのフィルター定義は可読性が低い場合があります。
- ブラウザ互換性: 一部の古いブラウザではサポートされていないフィルター効果があるかもしれません。
- メリット
- CSSとの分離：SVGファイル内に完結するため、CSSのスタイルシートを肥大化させません。
- 複雑なフィルター:
feGaussianBlur,feOffset,feMergeなど、様々なフィルター効果を組み合わせて、より複雑な効果を実現できます。
JavaScriptによる動的な影の制御
JavaScriptを用いることで、より動的でインタラクティブな影効果を実現できます。例えば、マウスオーバー時に影の色やサイズを変化させる、といったことが可能です。
const circle = document.querySelector('circle');
circle.addEventListener('mouseover', () => {
circle.style.filter = 'drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7))';
});
circle.addEventListener('mouseout', () => {
circle.style.filter = 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5))';
});
- デメリット
- 複雑性: CSSよりもコード量が増え、実装が複雑になる場合があります。
- パフォーマンス: 頻繁なスタイルの変更は、パフォーマンスに影響を与える可能性があります。
- メリット
- 動的な効果: JavaScriptのイベントリスナーと組み合わせて、インタラクティブな効果を実現できます。
- 詳細な制御: JavaScriptで直接スタイルを操作するため、より細かい制御が可能です。
SVGレンダリングエンジンの機能
SVGレンダリングエンジンによっては、独自の影効果を提供している場合があります。例えば、SVGエディタの中には、より高度な影効果をプレビューやエクスポートできるものがあります。
- デメリット
- メリット
- アクセシビリティ
視覚障がいを持つユーザーのために、適切なARIA属性やCSSの擬似クラスを使用して、影の効果を説明する必要があります。 - パフォーマンス
複雑なフィルター効果や、多くのSVG要素にフィルターを適用する場合、パフォーマンスが低下する可能性があります。 - ブラウザ互換性
filterプロパティやSVGのフィルター効果は、全てのブラウザで完全にサポートされているわけではありません。
SVGドロップシャドウの実装方法は、プロジェクトの要件や開発者のスキルによって最適な方法が異なります。CSSのfilter: drop-shadow()はシンプルで使いやすいですが、より高度な効果や動的な効果を実現したい場合は、SVG内部でのフィルター定義やJavaScriptによる制御を検討する必要があります。
選択のポイント
- ブラウザ互換性
ターゲットとするブラウザのサポート状況を確認する必要があります。 - 柔軟性
SVG内部でのフィルター定義やJavaScriptは、より高度なカスタマイズが可能です。 - シンプルさ
CSSのfilterプロパティは最もシンプルで、一般的なケースには十分です。
html css svg
