SVG の塗り
SVG の塗りと線を currentColor または none に設定します。
SVG の塗りを正確なユーティリティクラスで設定します。
クラスと CSS の早見表
| クラスの例 | 期待される宣言 |
|---|---|
fill-none | fill: none; |
stroke-current | stroke: currentColor; |
fill-current | fill: currentColor; |
stroke-none | stroke: none; |
例の設定
これらのクラスにトークン設定は不要です。プレビューの自作 CSS は例とともに表示されます。
使い方の例
SVG の塗り
svg-paint は対応済みの Wind ユーティリティクラスを使います。
SVG の塗り
HTML
<div class="wind-demo-new"><svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Outlined circle"><circle class="fill-none stroke-current" cx="32" cy="32" r="24" stroke-width="4"/></svg><svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Filled circle"><circle class="fill-current stroke-none" cx="32" cy="32" r="24"/></svg></div>CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-spacing-unit: .25rem;
}
}
.wind-demo-new {
color: #203046;
font: 14px / 1.5 system-ui, sans-serif;
}
.fill-current {
fill: currentColor;
}
.fill-none {
fill: none;
}
.stroke-current {
stroke: currentColor;
}
.stroke-none {
stroke: none;
}この例の設定
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem"
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-new": true
},
"safelist": {
"docs-preview": [
"fill-none",
"stroke-current",
"fill-current",
"stroke-none"
]
}
}
}デモ用の自作 CSS
.wind-demo-new { color: #203046; font: 14px/1.5 system-ui, sans-serif; }任意値と名前付きの値
current と none の正確な形式だけが対象です。それ以外の SVG の塗りは CSS に記述してください。
関連ガイド: ユーティリティの文法 · バリアント
カタログの詳細
fill-current
| フィールド | 値 |
|---|---|
| カタログ識別子 | v1.fill-current |
| クラスパターン | fill-current |
| 文法 | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| 受け入れる値 | 1 |
| トークンカテゴリ | トークンカテゴリなし |
| 負の値の規則 | forbidden |
| 競合グループと順位 | svg (48) |
| 並び順の順位 | 0 |
| セレクタの形 | ownElement |
| 仕様バージョン | 1 |
| 出力するプロパティ | fill |
受け入れる値
| 種類 | 接尾辞 | 出力される値 |
|---|---|---|
exact | null | "currentColor" |
宣言テンプレート
| プロパティ | 値の種類 | 固定値 |
|---|---|---|
fill | resolved | null |
カタログの例
| クラスの例 | 期待される宣言 |
|---|---|
fill-current | fill: currentColor |
fill-none
| フィールド | 値 |
|---|---|
| カタログ識別子 | v1.fill-none |
| クラスパターン | fill-none |
| 文法 | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| 受け入れる値 | 1 |
| トークンカテゴリ | トークンカテゴリなし |
| 負の値の規則 | forbidden |
| 競合グループと順位 | svg (48) |
| 並び順の順位 | 0 |
| セレクタの形 | ownElement |
| 仕様バージョン | 1 |
| 出力するプロパティ | fill |
受け入れる値
| 種類 | 接尾辞 | 出力される値 |
|---|---|---|
exact | null | "none" |
宣言テンプレート
| プロパティ | 値の種類 | 固定値 |
|---|---|---|
fill | resolved | null |
カタログの例
| クラスの例 | 期待される宣言 |
|---|---|
fill-none | fill: none |
stroke-current
| フィールド | 値 |
|---|---|
| カタログ識別子 | v1.stroke-current |
| クラスパターン | stroke-current |
| 文法 | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| 受け入れる値 | 1 |
| トークンカテゴリ | トークンカテゴリなし |
| 負の値の規則 | forbidden |
| 競合グループと順位 | svg (48) |
| 並び順の順位 | 1 |
| セレクタの形 | ownElement |
| 仕様バージョン | 1 |
| 出力するプロパティ | stroke |
受け入れる値
| 種類 | 接尾辞 | 出力される値 |
|---|---|---|
exact | null | "currentColor" |
宣言テンプレート
| プロパティ | 値の種類 | 固定値 |
|---|---|---|
stroke | resolved | null |
カタログの例
| クラスの例 | 期待される宣言 |
|---|---|
stroke-current | stroke: currentColor |
stroke-none
| フィールド | 値 |
|---|---|
| カタログ識別子 | v1.stroke-none |
| クラスパターン | stroke-none |
| 文法 | {"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false} |
| 受け入れる値 | 1 |
| トークンカテゴリ | トークンカテゴリなし |
| 負の値の規則 | forbidden |
| 競合グループと順位 | svg (48) |
| 並び順の順位 | 1 |
| セレクタの形 | ownElement |
| 仕様バージョン | 1 |
| 出力するプロパティ | stroke |
受け入れる値
| 種類 | 接尾辞 | 出力される値 |
|---|---|---|
exact | null | "none" |
宣言テンプレート
| プロパティ | 値の種類 | 固定値 |
|---|---|---|
stroke | resolved | null |
カタログの例
| クラスの例 | 期待される宣言 |
|---|---|
stroke-none | stroke: none |
Revision History
作成更新