Tailwind CSSでSVGの塗りつぶしを簡単スタイリング！fill属性の使い方と応用例
fill ユーティリティの使い方
fill ユーティリティは、SVG 要素にクラスとして適用することで使用します。塗りつぶしの色は、Tailwind CSS のカラーパレットと同じように指定できます。
<svg class="fill-blue-500" viewBox="0 0 24 24">
</svg>
上記の例では、SVG 要素が青色 (#2196F3) で塗りつぶされます。
利用可能なカラーオプション
- カスタムカラー
- テーマカラー
- デフォルトカラー
例
- カスタムカラー:
fill-gray-800 - 黄色:
fill-yellow-300 - 緑色:
fill-green-400 - 赤色:
fill-red-500
現在のテキストカラーを使用する
fill-current ユーティリティを使用すると、SVG の塗りつぶしが親要素のテキストカラーと同じになります。これは、アイコンやテキストと色を一致させたい場合に便利です。
<span class="text-blue-500">
<svg class="fill-current" viewBox="0 0 24 24">
</svg>
</span>
上記の例では、SVG 要素は親 <span> 要素と同じ青色 (#2196F3) で塗りつぶされます。
グラデーションを使用する
Tailwind CSS のグラデーションユーティリティを使用して、SVG にグラデーションの塗りつぶしを適用することもできます。
<svg class="fill-gradient-from-purple-500 to-pink-500" viewBox="0 0 24 24">
</svg>
上記の例では、SVG 要素は紫 (#673AB7) からピンク (#F87171) へのグラデーションで塗りつぶされます。
SVG の塗りつぶしを削除する
fill-none ユーティリティを使用して、SVG の塗りつぶしを完全に削除することができます。
<svg class="fill-none stroke-current" viewBox="0 0 24 24">
</svg>
上記の例では、SVG 要素の塗りつぶしが削除され、代わりに stroke-current ユーティリティによってストロークが現在のテキストカラーで描画されます。
基本的な塗りつぶし
<svg class="w-6 h-6 fill-blue-500" viewBox="0 0 24 24">
<path d="M12 8c-2.21 0-4 1.79-4 4 0 2.21 1.79 4 4 4 2.21 0 4-1.79 4-4 0-2.21-1.79-4-4-4z" />
</svg>
このコードは、青い正方形の SVG アイコンを作成します。
<span class="text-blue-500">
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
<path d="M12 8c-2.21 0-4 1.79-4 4 0 2.21 1.79 4 4 4 2.21 0 4-1.79 4-4 0-2.21-1.79-4-4-4z" />
</svg>
</span>
このコードは、青い正方形の SVG アイコンを作成し、親 <span> 要素と同じ色になります。
<svg class="w-6 h-6 fill-gradient-from-purple-500 to-pink-500" viewBox="0 0 24 24">
<path d="M12 8c-2.21 0-4 1.79-4 4 0 2.21 1.79 4 4 4 2.21 0 4-1.79 4-4 0-2.21-1.79-4-4-4z" />
</svg>
このコードは、紫からピンクへのグラデーションで塗りつぶされた正方形の SVG アイコンを作成します。
<svg class="w-6 h-6 fill-none stroke-current" viewBox="0 0 24 24">
<path d="M12 8c-2.21 0-4 1.79-4 4 0 2.21 1.79 4 4 4 2.21 0 4-1.79 4-4 0-2.21-1.79-4-4-4z" />
</svg>
このコードは、青い輪郭線を持つ空の正方形の SVG アイコンを作成します。
上記の例に加えて、Tailwind CSS の fill ユーティリティを使用して様々な効果を作成することができます。
- 画像のマスク
- 不透明度の調整
- 複数のパスに異なる塗りつぶしを適用する
stroke 属性
stroke 属性は、SVG 図形の境界線に色やスタイルを適用するために使用されます。塗りつぶし単体で使用したり、fill 属性と組み合わせて使用して、より複雑な外観を作成したりすることができます。
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none" stroke="red" stroke-width="10" />
</svg>
上記の例では、赤い太線で縁取られた白い円が描画されます。
image 要素
image 要素を使用して、SVG 内に画像を埋め込むことができます。画像を塗りつぶしとして使用することで、複雑なテクスチャやパターンを作成することができます。
<svg viewBox="0 0 100 100">
<image href="image.jpg" x="0" y="0" width="100" height="100" />
</svg>
上記の例では、"image.jpg" 画像が SVG 領域全体に表示されます。
パターン
SVG には、パターンと呼ばれる繰り返し可能なグラフィックを作成するための仕組みが組み込まれています。パターンを使用して、複雑な塗りつぶしやテクスチャを作成することができます。
<svg viewBox="0 0 100 100">
<defs>
<pattern id="stripes" patternUnits="userSpaceOnUse" width="10" height="10">
<line x1="0" y1="0" x2="10" y2="0" stroke="red" stroke-width="2" />
<line x1="0" y1="5" x2="10" y2="5" stroke="blue" stroke-width="2" />
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100" fill="url(#stripes)" />
</svg>
上記の例では、赤い線と青い線が交互に並んだストライプのパターンが定義され、そのパターンが長方形の塗りつぶしに使用されます。
マスク
マスクを使用して、他の SVG 図形を使って別の図形の塗りつぶしを隠したり、切り抜いたりすることができます。これにより、複雑な形状や切り抜き効果を作成することができます。
<svg viewBox="0 0 100 100">
<defs>
<mask id="circle-mask">
<circle cx="50" cy="50" r="40" fill="white" />
</mask>
</defs>
<image href="image.jpg" x="0" y="0" width="100" height="100" mask="url(#circle-mask)" />
</svg>
上記の例では、白い円形のマスクが定義され、そのマスクを使用して "image.jpg" 画像が円形に切り抜かれます。
フィルタ
SVG には、ぼかし、影、ドロップシャドウなどの効果を図形に適用するためのフィルタが組み込まれています。フィルタを使用して、塗りつぶしに深みや複雑さを加えることができます。
<svg viewBox="0 0 100 100">
<rect x="20" y="20" width="60" height="60" fill="blue" filter="url(#drop-shadow)">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="5" dy="5" />
<feComposite operator="over" in="SourceAlpha" in2="BackgroundImage" />
</filter>
</rect>
</svg>
上記の例では、青い長方形にぼやけた影が追加されます。
外部ファイル
fill 属性に URL を指定することで、外部 SVG ファイルを塗りつぶしとして参照することができます。これにより、複雑な図形やイラストを再利用することができます。
<svg viewBox="0 0 100 100">
<use href="external-icon.svg#icon-name"