diff --git a/files/ja/web/css/text-combine-upright/index.md b/files/ja/web/css/text-combine-upright/index.md index 1e6aef8d0690d6..a4df1ce9e3fc61 100644 --- a/files/ja/web/css/text-combine-upright/index.md +++ b/files/ja/web/css/text-combine-upright/index.md @@ -1,6 +1,8 @@ --- title: text-combine-upright slug: Web/CSS/text-combine-upright +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e --- {{CSSRef}} @@ -9,6 +11,10 @@ slug: Web/CSS/text-combine-upright これは、日本語の縦中横、中国語の 直書橫向 として知られる効果をもたらすために使用されます。 +{{EmbedInteractiveExample("pages/css/text-combine-upright.html")}} + +## 構文 + ```css /* キーワード値 */ text-combine-upright: none; @@ -22,13 +28,10 @@ text-combine-upright: digits 4; /* 4 桁までの数字を垂直テキスト内 text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: revert; +text-combine-upright: revert-layer; text-combine-upright: unset; ``` -{{EmbedInteractiveExample("pages/css/text-combine-upright.html")}} - -## 構文 - ### 値 - `none` @@ -48,31 +51,7 @@ text-combine-upright: unset; ## 例 -### digits - -digits 値は、数字の桁を組み合わせる際に all の値よりもマークアップが少なくてすみますが、対応しているブラウザーはあまり多くありません。 - -#### HTML - -```html -

平成20年4月16日に

-``` - -#### CSS - -```css -.exampleText { - writing-mode: vertical-lr; - text-combine-upright: digits 2; - font: 36px serif; -} -``` - -#### 結果 - -{{EmbedLiveSample("Digits", 100, 350, "tate-chu-yoko.png")}} - -### all +### 横書きテキストでの 'all' の使用 all の値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーが対応しています。 @@ -101,7 +80,7 @@ html { #### 結果 -{{EmbedLiveSample("All", 250, 300, "text-combine-upright-all.png")}} +{{EmbedLiveSample('横書きテキストでの "all" の使用', 250, 200)}} ## 仕様書 diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md index fa8f553c1cca67..921928914ca5ae 100644 --- a/files/ja/web/css/text-transform/index.md +++ b/files/ja/web/css/text-transform/index.md @@ -1,6 +1,8 @@ --- title: text-transform slug: Web/CSS/text-transform +l10n: + sourceCommit: abf155210d826c2584d23433eb2eac45a6669d23 --- {{CSSRef}} @@ -20,7 +22,7 @@ slug: Web/CSS/text-transform 言語は HTML の [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性や XML の [`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性で定義します。 -> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性一覧表](#browser_compatibility)を確認してください。 +> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。 ## 構文 @@ -37,6 +39,7 @@ text-transform: full-size-kana; text-transform: inherit; text-transform: initial; text-transform: revert; +text-transform: revert-layer; text-transform: unset; ``` @@ -104,9 +107,9 @@ strong { 文字を変換しない例です。 -{{ EmbedLiveSample('none', '100%', '100px') }} +{{ EmbedLiveSample('Example using "none"', '100%', '100px') }} -

capitalize (一般的)

+### capitalize (一般的) ```html

@@ -134,9 +137,9 @@ strong { 頭文字を大文字にする例です。 -{{ EmbedLiveSample('capitalize_General', '100%', '100px') }} +{{ EmbedLiveSample('Example using "capitalize" (general)', '100%', '100px') }} -

capitalize (句読点)

+### capitalize (句読点) ```html

@@ -168,9 +171,9 @@ strong { 単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。 -{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }} +{{ EmbedLiveSample('Example using "capitalize" (punctuation)', '100%', '100px') }} -

capitalize (記号)

+### capitalize (記号) ```html

@@ -194,9 +197,9 @@ strong { 頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。 -{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }} +{{ EmbedLiveSample('Example using "capitalize" (symbols)', '100%', '100px') }} -

capitalize (オランダ語の二重音字 ij)

+### capitalize (オランダ語の二重音字 ij) ```html

@@ -224,9 +227,9 @@ strong { オランダ語の二重音字 _ij_ を 1 文字として扱わなければならないことを示す例です。 -{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }} +{{ EmbedLiveSample('Example using "capitalize" (Dutch ij digraph)', '100%', '100px') }} -

uppercase (一般的)

+### uppercase (一般的) ```html

@@ -254,9 +257,9 @@ strong { テキストを大文字に変換する例です。 -{{ EmbedLiveSample('uppercase_General', '100%', '100px') }} +{{ EmbedLiveSample('Example using "uppercase" (general)', '100%', '100px') }} -

uppercase (ギリシャ語の母音字)

+### uppercase (ギリシャ語の母音字) ```html

@@ -282,9 +285,9 @@ strong { 離接的接続の _eta_ を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。 -{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }} +{{ EmbedLiveSample('Example using "uppercase" (Greek vowels)', '100%', '100px') }} -

lowercase (一般的)

+### lowercase (一般的) ```html

@@ -312,9 +315,9 @@ strong { テキストを小文字に変換する例です。 -{{ EmbedLiveSample('lowercase_General', '100%', '100px') }} +{{ EmbedLiveSample('Example using "lowercase" (general)', '100%', '100px') }} -

lowercase (ギリシャ文字 Σ)

+### lowercase (ギリシャ文字 Σ) ```html

@@ -342,9 +345,9 @@ strong { ギリシャ文字のシグマ (`Σ`) が、状況に応じて一般的な小文字のシグマ (`σ`) または単語の末尾での表記 (`ς`) に変換される例です。 -{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }} +{{ EmbedLiveSample('Example using "lowercase" (Greek Σ)', '100%', '100px') }} -

lowercase (リヒテンシュタイン語)

+### lowercase (リヒテンシュタイン語) ```html

@@ -368,9 +371,9 @@ strong { これはリヒテンシュタインの文字 `Ĩ` および `J́` が小文字に変換されるとドットを保持する様子を示します。 -{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }} +{{ EmbedLiveSample('Example using "lowercase" (Lithuanian)', '100%', '100px') }} -

full-width (一般)

+### full-width (一般) ```html

@@ -401,9 +404,9 @@ strong { 一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。 -{{ EmbedLiveSample('full-width_General', '100%', '175px') }} +{{ EmbedLiveSample('Example using "full-width" (general)', '100%', '175px') }} -

full-width (日本語の半角カタカナ)

+### full-width (日本語の半角カタカナ) ```html

@@ -428,9 +431,9 @@ strong { 日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。 -{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }} +{{ EmbedLiveSample('Example using "full-width" (Japanese half-width katakana)', '100%', '175px') }} -

full-size-kana

+### full-size-kana ```html

ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ

@@ -444,7 +447,7 @@ p:nth-of-type(2) { } ``` -{{ EmbedLiveSample('full-size-kana', '100%', '175px') }} +{{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }} ## 仕様書 diff --git a/files/ja/web/css/width/index.md b/files/ja/web/css/width/index.md index 69dcd3a18ae69e..a27dca9364df4a 100644 --- a/files/ja/web/css/width/index.md +++ b/files/ja/web/css/width/index.md @@ -1,6 +1,8 @@ --- title: width slug: Web/CSS/width +l10n: + sourceCommit: 925b2bd8beeae6ce8237863637bcd28ccbb8d47f --- {{CSSRef}} @@ -9,7 +11,10 @@ slug: Web/CSS/width {{EmbedInteractiveExample("pages/css/width.html")}} -{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは `width` を上書きします。 +`width` に指定された値は、その値が {{cssxref("min-width")}} および {{cssxref("max-width")}} で定義された値内にある限り、コンテンツ領域に適用されます。 + +- `width` の値が `min-width` の値より小さい場合、`min-width` は `width` をオーバーライドします。 +- `width` の値が `max-width` の値より大きい場合、`max-width` は `width` をオーバーライドします。 ## 構文 @@ -24,6 +29,7 @@ width: 75%; /* キーワード値 */ width: max-content; width: min-content; +width: fit-content; width: fit-content(20em); width: auto; @@ -31,6 +37,7 @@ width: auto; width: inherit; width: initial; width: revert; +width: revert-layer; width: unset; ``` @@ -39,14 +46,16 @@ width: unset; - {{cssxref("<length>")}} - : 絶対的な値で幅を定義します。 - {{cssxref("<percentage>")}} - - : 親となる包含ブロックの幅に対するパーセント値で定義します。 + - : 親となる[包含ブロック](/ja/docs/Web/CSS/Containing_block)の幅に対するパーセント値で定義します。 - `auto` - : 指定された要素の幅をブラウザーが計算して決めます。 - `max-content` - : 望ましい固有の幅です。 - `min-content` - : 最小の固有の幅です。 -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : 利用可能なスペースを使用しますが、[max-content](/ja/docs/Web/CSS/max-content)、つまり `min(max-content, max(min-content, stretch))` を超えません。 +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, ))` です。 ## アクセシビリティの考慮 @@ -66,7 +75,7 @@ width: unset; ## 例 -

既定の幅

+### 既定の幅 ```css p.goldie { @@ -80,7 +89,7 @@ p.goldie { {{EmbedLiveSample('Default_width', '500px', '64px')}} -

ピクセル数と em 単位

+### ピクセル数と em 単位 ```css .px_length { @@ -103,9 +112,9 @@ p.goldie {
Width measured in em
``` -{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}} +{{EmbedLiveSample('Example using pixels and ems', '500px', '64px')}} -

パーセント値

+### Percentage の例 ```css .percent { @@ -119,9 +128,9 @@ p.goldie {
Width in percentage
``` -{{EmbedLiveSample('Percentage', '500px', '64px')}} +{{EmbedLiveSample('Example using percentage', '500px', '64px')}} -### max-content +### max-content の例 ```css p.maxgreen { @@ -137,9 +146,9 @@ p.maxgreen {

The Mozilla community produces a lot of great software.

``` -{{EmbedLiveSample('max-content', '500px', '64px')}} +{{EmbedLiveSample('Example using "max-content"', '500px', '64px')}} -### min-content +### min-content の例 ```css p.minblue { @@ -154,7 +163,7 @@ p.minblue {

The Mozilla community produces a lot of great software.

``` -{{EmbedLiveSample('min-content', '500px', '155px')}} +{{EmbedLiveSample('Example using "min-content"', '500px', '155px')}} ## 仕様書 diff --git a/files/ja/web/svg/attribute/cx/index.md b/files/ja/web/svg/attribute/cx/index.md index eb626f186d4a65..9396c8549f53b4 100644 --- a/files/ja/web/svg/attribute/cx/index.md +++ b/files/ja/web/svg/attribute/cx/index.md @@ -1,13 +1,21 @@ --- title: cx slug: Web/SVG/Attribute/cx +l10n: + sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a --- {{SVGRef}} **`cx`** 属性は中心の x-座標を定義します。 -3 つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}} +この属性は次の SVG 要素で使用できます。 + +- {{SVGElement("circle")}} +- {{SVGElement("ellipse")}} +- {{SVGElement("radialGradient")}} + +## 例 ```css hidden html, @@ -30,16 +38,28 @@ svg { ``` -{{EmbedLiveSample('topExample', 100, 100)}} +{{EmbedLiveSample("Example", 100, 100)}} ## circle {{SVGElement('circle')}}に対して、`cx`は、図形の x-軸の中心を定義します。 -| 値 | {{cssxref("length-percentage")}} | -| ------------------ | -------------------------------- | -| 既定値 | `0` | -| アニメーション可否 | はい | + + + + + + + + + + + + + + + +
値{{cssxref("length-percentage")}}
既定値0
アニメーションYes
> **メモ:** SVG2 として開始する場合には、`cx`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。 @@ -54,11 +74,11 @@ svg { {{cssxref("length-percentage")}} - Default value + 既定値 0 - Animatable + アニメーション はい @@ -81,13 +101,13 @@ svg { 50% - アニメーション可否 + アニメーション はい -#### 例 +### 例 ```css hidden html, diff --git a/files/ja/web/svg/attribute/cy/index.md b/files/ja/web/svg/attribute/cy/index.md index d8b0e159159ba1..dd54b772a64abd 100644 --- a/files/ja/web/svg/attribute/cy/index.md +++ b/files/ja/web/svg/attribute/cy/index.md @@ -1,13 +1,21 @@ --- title: cy slug: Web/SVG/Attribute/cy +l10n: + sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a --- {{SVGRef}} **`cy`** 属性は中心の y-座標を定義します。 -3 つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}} +この属性は次の SVG 要素で使用できます。 + +- {{SVGElement("circle")}} +- {{SVGElement("ellipse")}} +- {{SVGElement("radialGradient")}} + +## 例 ```css hidden html, @@ -30,16 +38,38 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 300)}} +{{EmbedLiveSample("Example", '100%', 300)}} ## circle {{SVGElement('circle')}}に対して、`cy`は、図形の y-軸の中心を定義します。 -| 値 | **[\](/ja/docs/Web/SVG/Content_type#Length)** \| **[\](/ja/docs/Web/SVG/Content_type#Percentage)** | -| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| 既定値 | `0` | -| アニメーション可否 | はい | + + + + + + + + + + + + + + + +
値 + <length> + | + <percentage> +
既定値0
アニメーションYes
> **メモ:** SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。 @@ -47,10 +77,32 @@ svg { {{SVGElement('ellipse')}}に対して、`cy`は図形中心の y-座標を定義します。 -| 値 | **[\](/ja/docs/Web/SVG/Content_type#Length)** \| **[\](/ja/docs/Web/SVG/Content_type#Percentage)** | -| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| 既定値 | `0` | -| アニメーション可否 | はい | + + + + + + + + + + + + + + + +
値 + <length> + | + <percentage> +
既定値0
アニメーションYes
> **メモ:** SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。 @@ -58,12 +110,28 @@ svg { {{SVGElement('radialGradient')}}に対して、`cy`は、放射状勾配の終端円の y-座標を定義します。 -| 値 | **[\](/ja/docs/Web/SVG/Content_type#Length)** | -| ------------------ | ----------------------------------------------------- | -| 既定値 | `50%` | -| アニメーション可否 | はい | - -#### 例 + + + + + + + + + + + + + + + +
値 + <length> +
既定値50%
アニメーションYes
+ +### 例 ```css hidden html, diff --git a/files/ja/web/svg/attribute/d/index.md b/files/ja/web/svg/attribute/d/index.md index 3fda2ff3f3aac6..218f41419eb202 100644 --- a/files/ja/web/svg/attribute/d/index.md +++ b/files/ja/web/svg/attribute/d/index.md @@ -1,6 +1,8 @@ --- title: d slug: Web/SVG/Attribute/d +l10n: + sourceCommit: 32d1c9ff83019f8efae3e7987a55e83035e4b926 --- {{SVGRef}} @@ -9,7 +11,11 @@ slug: Web/SVG/Attribute/d パスの定義は[パスコマンド](#Path_commands)のリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。 -３つの要素がこの属性を有します： {{SVGElement("path")}}, {{SVGElement("glyph")}}, {{SVGElement("missing-glyph")}} +３つの要素がこの属性を有します： [``](#path), [``](#glyph), [``](#missing-glyph) + +`d` は [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation) のため、[CSS プロパティとして使用](#css_%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A8%E3%81%97%E3%81%A6_d_%E3%82%92%E4%BD%BF%E7%94%A8) することもできます。 + +## 例 ```css hidden html, @@ -38,10 +44,24 @@ svg { {{SVGElement('path')}}要素に対しては、`d`属性は、描かれるパスを定義するパスコマンドの並びを含む文字列です。 -| 値 | **[\](/ja/docs/Web/SVG/Content_type#String)** | -| ------------------ | ----------------------------------------------------- | -| 初期値 | _none_ | -| アニメーション可否 | Yes | + + + + + + + + + + + + + + + +
値 + <string> +
既定値none
アニメーションYes
## glyph @@ -49,12 +69,26 @@ svg { {{SVGElement('glyph')}}要素に対しては、`d`属性はグリフのアウトライン形状を定義するパスコマンドの並びを含む文字列です。 -| 値 | **[\](/ja/docs/Web/SVG/Content_type#String)** | -| ------------------ | ----------------------------------------------------- | -| 初期値 | _none_ | -| アニメーション可否 | Yes | + + + + + + + + + + + + + + + +
値 + <string> +
既定値none
アニメーションYes
-> **メモ:** 原点(座標`0`,`0`)は通常、コンテキストの*左上の角*です。しかし、{{SVGElement("glyph")}}要素は、それ自身の原点を文字ボックスの*左下*に持ちます。 +> **メモ:** 原点(座標`0`, `0`)は通常、コンテキストの _左上の角_ です。しかし、{{SVGElement("glyph")}}要素は、それ自身の原点を文字ボックスの _左下_ に持ちます。 ## missing-glyph @@ -62,10 +96,63 @@ svg { {{SVGElement('missing-glyph')}}要素に対しては、`d`属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。 -| 値 | **[\](/ja/docs/Web/SVG/Content_type#String)** | -| ------------------ | ----------------------------------------------------- | -| 初期値 | _none_ | -| アニメーション可否 | Yes | + + + + + + + + + + + + + + + +
値 + <string> +
既定値none
アニメーションYes
+ +## CSS プロパティとして d を使用 + +`d` は [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation) であるため、CSS を使用して変更することもできます。 +このプロパティは、[path()](/ja/docs/Web/CSS/path) または `none` のいずれかをとります。 + +以下の例は、要素の上にマウスを置くと新しいパスを適用する方法を示しています。 +新しいパスは古いパスと同じですが、ハートを横切る線が追加されます。 + +```css +html, +body, +svg { + height: 100%; +} + +/* This path is displayed on hover*/ +#svg_css_ex1:hover path { + d: path( + "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90" + ); +} +``` + +```html + + + +``` + +{{EmbedLiveSample('Using d as a CSS Property', '100%', 200)}} ## パスコマンド @@ -80,22 +167,72 @@ SVG では、6 つのタイプのパスコマンドを定義しており、全 - 楕円円弧曲線: `A`, `a` - ClosePath: `Z`, `z` -> **メモ:** **ノート:**コマンドは*ケースセンシティブ（大小文字の区別あり）*です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。 +> **メモ:** コマンドは _ケースセンシティブ（大小文字の区別あり）_ です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。 コマンドへの引数として負値を指定することは常に可能です: - 負の角度は反時計回りとなります; -- *絶対値*での負の*x*と*y*の値は反転座標と解釈されます; -- *相対値*での負の*x*の値は左へ移動,相対値での負の*y*の値は上方向へ移動します。 +- _絶対値_ での負の _x_ と _y_ の値は反転座標と解釈されます; +- _相対値_ での負の _x_ の値は左へ移動、相対値での負の _y_ の値は上方向へ移動します。 ### MoveTo パスコマンド -*MoveTo*での指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、_現在位置_ (Po; {xo, yo})の移動です。Po と新しい*現在位置* (Pn; {xn, yn})との間には線は描かれません。 +_MoveTo_ での指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、_現在位置_ (_Po_; {_xo_, _yo_}) の移動です。_Po_ と新しい _現在位置_ (_Pn_; {_xn_, _yn_}) との間には線は描かれません。 -| コマンド | パラメータ | 説明 | -| -------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| M | (`x`, `y`)+ | *現在位置*を座標`x`,`y`へ移動します。後続する任意個の座標の組は暗黙的に絶対座標での LineTo(`L`)コマンドと解釈されます(_以下を参照_)。**形式:** Pn = {`x`, `y`} | -| m | (`dx`, `dy`)+ | *現在位置*を最後に把握されたパス位置からの`dx`を x 軸方向、`dy`を y 軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標での LineTo(`l`)コマンドとして解釈されます(_以下を参照_)。**形式:** Pn = {xo + `dx`, yo + `dy`} | + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
M + (x, y)+ + +

+ 現在位置 を座標 + x,y へ移動します。後続する任意個の座標の組は暗黙的に絶対座標での LineTo(L)コマンドと解釈されます(以下を参照)。 +

+

+ 形式: Pn = {x, y} +

+
m + (dx, dy)+ + +

+ 現在位置 を最後に把握されたパス位置からの dx を x 軸方向、dy を y 軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標での LineTo(l)コマンドとして解釈されます(以下を参照)。 +

+

+ 形式: Pn = {xo + + dx, yo + dy} +

+
#### 例 @@ -130,16 +267,125 @@ svg { ### LineTo パスコマンド -*LineTo*は、_現在位置_ (Po; {xo, yo})から*終端位置* (Pn; {xn, yn})への直線を指定されたパラメータに基づいて描きます。_終端位置_(Pn)は、次のコマンドでの*現在位置* (Po′)となります。 +_LineTo_ は、_現在位置_ (_Po_; {_xo_, _yo_}) から _終端位置_ (_Pn_; {_xn_, _yn_}) への直線を指定されたパラメータに基づいて描きます。_終端位置_ (_Pn_) は、次のコマンドでの _現在位置_ (_Po′_) となります。 -| コマンド | パラメータ | 説明 | -| -------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| L | (`x`, `y`)+ | *現在位置*から`x`,`y`で指定される*終端位置*へ直線を描きます。後続する任意個の座標の組は暗黙的に絶対座標での LineTo (`L`) コマンドと解釈されます。**形式:** Po′ = Pn = {`x`, `y`} | -| l | (`dx`, `dy`)+ | *現在位置*から、*現在位置*に対する x-軸方向に`dx`、y-軸方向に`dy`で表される*終端位置*への直線を描きます。後続する任意個の座標の組は、暗黙的に相対座標での LineTo (`l`) コマンドと解釈されます(_以下を参照_)。**形式:** Po′ = Pn = {xo + `dx`, yo + `dy`} | -| H | `x`+ | *現在位置*から、パラメータ`x`と*現在位置の\_y 座標で指定される*終端座標\_までの水平線を描きます。後続する任意個の値は、暗黙的に絶対座標での水平線用の LineTo (`H`)コマンドと解釈されます。**形式:** Po′ = Pn = {`x`, yo} | -| h | `dx`+ | *現在位置*から、*現在位置*からの x-軸方向への`dx`の並進と*現在位置の\_y 座標で指定される*終端位置\_までの水平線を描きます。後続する任意個の値は、暗黙的に相対座標での水平線用の LineTo (`h`)コマンドと解釈されます。**形式:** Po′ = Pn = {xo + `dx`, yo} | -| V | `y`+ | *現在位置*から、パラメータ`y`と*現在位置の\_x 座標で指定される*終端座標\_までの垂直線を描きます。後続する任意個の値は、暗黙的に絶対座標での垂直線用の LineTo (`V`)コマンドと解釈されます。**形式:** Po′ = Pn = {xo, `y`} | -| v | `dy`+ | *現在位置*から、*現在位置*からの y-軸方向への`dx`の並進と*現在位置の\_x 座標で指定される*終端位置\_までの垂直線を描きます。後続する任意個の値は、暗黙的に相対座標での垂直線用の LineTo (`v`)コマンドと解釈されます。**形式:** Po′ = Pn = {xo, yo + `dy`} | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
L(x, y)+ +

+ 現在位置 から x,y で指定される 終端位置 へ直線を描きます。後続する任意個の座標の組は暗黙的に絶対座標での LineTo (L) コマンドと解釈されます。 +

+

+ 形式: Po′ = + Pn = {x, y} +

+
l + (dx, dy)+ + +

+ 現在位置 から、現在位置 に対する x-軸方向にdx 、y-軸方向に dy で表される 終端位置 への直線を描きます。後続する任意個の座標の組は、暗黙的に相対座標での LineTo (l) コマンドと解釈されます(以下を参照)。 +

+

+ 形式: Po′ = + Pn = {xo + + dx, yo + dy} +

+
H + x+ + +

+ 現在位置から、パラメータxと現在位置のy座標で指定される終端座標までの水平線を描きます。後続する任意個の値は、暗黙的に絶対座標での水平線用の LineTo (H)コマンドと解釈されます。 +

+

+ 形式: Po′ = + Pn = {x, yo} +

+
h + dx+ + +

+ 現在位置から、現在位置からの x-軸方向へのdxの並進と現在位置の y 座標で指定される終端位置までの水平線を描きます。後続する任意個の値は、暗黙的に相対座標での水平線用の LineTo (h) コマンドと解釈されます。 +

+

+ 形式: Po′ = + Pn = {xo + + dx, yo} +

+
V + y+ + +

+ 現在位置から、パラメータ y と現在位置の x 座標で指定される終端座標までの垂直線を描きます。後続する任意個の値は、暗黙的に絶対座標での垂直線用の LineTo (V)コマンドと解釈されます。 +

+

+ 形式: Po′ = + Pn = {xo, y} +

+
v + dy+ + +

+ 現在位置から、現在位置からの y-軸方向への dy の並進と現在位置の x 座標で指定される終端位置までの垂直線を描きます。後続する任意個の値は、暗黙的に相対座標での垂直線用の LineTo (v)コマンドと解釈されます。 +

+

+ 形式: Po′ = + Pn = {xo, yo + dy} +

+
#### 例 @@ -190,9 +436,9 @@ _3 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A - : (Pce = {xce, yce}) (曲線の終端近くの曲率を制御します) -描画後に、_終端位置_(Pn)は、次のコマンドに対する*現在位置* (Po′)となります。 +描画後に、_終端位置_ (_Pn_) は、次のコマンドに対する _現在位置_ (_Po′_) となります。 - +
@@ -202,8 +448,13 @@ _3 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A @@ -225,8 +479,13 @@ _3 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A - +
コマンド
C - (x1,y1, x2,y2, - x,y)+ + (x1,y1, x2,y2, x,y)+

@@ -213,11 +464,14 @@ _3 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A

形式:
- Po′ = Pn = {x, y} - ;
Pcs = {x1, y1} ;
Pce - = {x2, y2} + Po′ = Pn = {x, y} ;
Pcs = {x1, y1} ;
Pce = {x2, y2}
c - (dx1,dy1, dx2,dy2, - dx,dy)+ + (dx1,dy1, dx2,dy2, dx,dy)+

@@ -243,22 +502,31 @@ _3 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A

形式:
- Po′ = Pn = {xo + dx, - yo + dy} ;
Pcs = {xoPo′ = Pn = {xo - + dx1, yo + dy1} ;
Pce - = {xo + dx2, yo + - dy2} + + dx, yo + dy} ;
Pcs = {xo + + dx1, yo + dy1} ;
Pce = {xo + + dx2, yo + dy2}
S(x2,y2, x,y)+ + (x2,y2, x,y)+ + 開始位置から、x,yで指定される終端位置までの滑らかな3次ベジエ曲線を描きます。終端制御点は、x2,y2で指定されます。開始制御点は、直前の曲線コマンドの終端制御点が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、開始制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな3次ベジエ曲線(S)コマンドへのパラメータと解釈されます。 @@ -267,7 +535,11 @@ _3 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A
s - (dx2,dy2, dx,dy)+ + (dx2,dy2, dx,dy)+ 開始位置 - + ``` @@ -347,16 +619,16 @@ svg { _2 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A)_ は 3 点で定義される滑らかな曲線です: - _開始座標(現在位置)_ - - : Po = {xo, yo} + - : _Po_ = {_xo_, _yo_} - _終端座標_ - - : Pn = {xn, yn} + - : _Pn_ = {_xn_, _yn_} - _制御点_ - - : Pc = {xc, yc} + - : _Pc_ = {_xc_, _yc_} (曲率を制御します) -描画後に、_終端位置_(Pn)は、次のコマンドに対する*現在位置*(Po′)となります。 +描画後に、_終端位置_ (_Pn_) は、次のコマンドに対する _現在位置_ (_Po′_)となります。 - +
@@ -365,7 +637,13 @@ _2 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A - + @@ -384,7 +666,11 @@ _2 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A - + - + @@ -496,20 +801,20 @@ svg { - - - + + + ``` -{{EmbedLiveSample('Quadratic_Bezier_Curve', '100%', 200)}} +{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}} ### 楕円円弧曲線 -*楕円円弧曲線*は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。 +_楕円円弧曲線_ は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。 -
コマンド
Q(x1,y1, x,y)+ + (x1,y1, x,y)+ +

開始位置

形式:
- Po′ = Pn = {x, y} - ;
Pc = {x1, y1} + Po′ = Pn = {x, y} ;
Pc = {x1, y1}
q - (dx1,dy1, dx,dy)+ + (dx1,dy1, dx,dy)+

@@ -398,18 +684,26 @@ _2 次[ベジエ曲線](https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A

形式:
- Po′ = Pn = {xo + dx, - yo + dy} ;
Pc = {xoPo′ = Pn = {xo - + dx1, yo + dy1} + + dx, yo + dy} ;
Pc = {xo + + dx1, yo + dy1}
T(x,y)+ + (x,y)+ +

開始位置

形式:
- Po′ = Pn = {x, y} + Po′ = Pn = {x, y}
t(dx,dy)+ + (dx,dy)+ +

開始位置

形式:
- Po′ = Pn = {xo + dx, - yo + dy} + Po′ = Pn = {xo + + dx, yo + dy}
+
@@ -519,9 +824,11 @@ svg {
コマンド
A - (rx ry 角度 - 大円弧フラグ 掃引フラグ x - y)+ + (rx ry + 角度 大円弧フラグ< + 掃引フラグ x + y)+

@@ -554,9 +861,12 @@ svg {

a - (rx ry 角度 - 大円弧フラグflag 掃引フラグ dx - dy)+ + (rx ry + (rx ry 角度 + 大円弧フラグ + 掃引フラグ dx + dy)+

@@ -632,13 +942,26 @@ svg { ### ClosePath -*ClosePath*は、*現在位置*からパスの開始位置までの直線描画を指定します。 +_ClosePath_ は、_現在位置_ からパスの開始位置までの直線描画を指定します。 -| コマンド | パラメータ | 説明 | -| -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| Z, z | | パスの最終位置とその初期位置とを接続することで、現在のサブパスを閉じます。もし、2 つの点が異なる座標の場合は、2 点間に直線が描かれます。 | + + + + + + + + + + + + + +
コマンドパラメータ説明
Z, z + パスの最終位置とその初期位置とを接続することで、現在のサブパスを閉じます。もし、2 つの点が異なる座標の場合は、2 点間に直線が描かれます。 +
-> **メモ:** *ClosePath*によって生じる形状は、他のコマンドを用いて初期位置へ線を描いて閉じた場合とは異なる場合があります。これは、描線の終端が互いに接続されるためです ({{SVGAttr('stroke-linejoin')}} 設定)を参照のこと。 単に同じ座標に配置されるわけではありません。 +> **メモ:** _ClosePath_ によって生じる形状は、他のコマンドを用いて初期位置へ線を描いて閉じた場合とは異なる場合があります。これは、描線の終端が互いに接続されるためです ({{SVGAttr('stroke-linejoin')}} 設定)を参照のこと。 単に同じ座標に配置されるわけではありません。 #### 例 @@ -687,3 +1010,7 @@ svg { ## 仕様 {{Specifications}} + +## ブラウザー互換性 + +{{Compat}} diff --git a/files/ja/web/svg/attribute/fill-opacity/index.md b/files/ja/web/svg/attribute/fill-opacity/index.md index 2fe521c305a46b..21f35a316339ab 100644 --- a/files/ja/web/svg/attribute/fill-opacity/index.md +++ b/files/ja/web/svg/attribute/fill-opacity/index.md @@ -1,6 +1,8 @@ --- title: fill-opacity slug: Web/SVG/Attribute/fill-opacity +l10n: + sourceCommit: 5f7c22deaa74973658257aeaa012ac2ec0be87ae --- {{SVGRef}} @@ -9,7 +11,20 @@ slug: Web/SVG/Attribute/fill-opacity > **メモ:** プレゼンテーション属性としての`fill-opacity`CSS プロパティに適用できます。 -プレゼンテーション属性として、任意の要素に適用可能ですが、次の 11 個の要素のみで効果があります: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} +この属性は次の SVG 要素で使用できます。 + +- {{SVGElement('circle')}} +- {{SVGElement('ellipse')}} +- {{SVGElement('path')}} +- {{SVGElement('polygon')}} +- {{SVGElement('polyline')}} +- {{SVGElement('rect')}} +- {{SVGElement('text')}} +- {{SVGElement('textPath')}} +- {{SVGElement('tref')}} +- {{SVGElement('tspan')}} + +## 例 ```css hidden html, @@ -35,21 +50,40 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 150)}} +{{EmbedLiveSample("Example", '100%', 150)}} ## 使用上の注意 -| 値 | `[0-1]` \| **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------------ | ------------------------------------------------------------------- | -| 規定値 | `1` | -| アニメーション可否 | はい | + + + + + + + + + + + + + + + +
値 + [0-1] | + <percentage> +
規定値1
アニメーションYes
+ +> **メモ:** SVG2 では、`fill-opacity`への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(_以下の[ブラウザー実装状況](#ブラウザー実装状況)を参照_)。最良の実装としては、不透明度を`[0-1]`の範囲の値として指定することです。 -> **メモ:** SVG2 では、`fill-opacity`への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(_以下の[ブラウザ実装状況](#Browser_Compatibility)を参照_)。最良の実装としては、不透明度を`[0-1]`の範囲の値として指定することです。 +## 仕様 + +{{Specifications}} ## ブラウザー実装状況 {{Compat}} - -## 仕様 - -{{Specifications}} diff --git a/files/ja/web/svg/attribute/fill/index.md b/files/ja/web/svg/attribute/fill/index.md index 811c6198db5d4a..b4daa0ffc93dd4 100644 --- a/files/ja/web/svg/attribute/fill/index.md +++ b/files/ja/web/svg/attribute/fill/index.md @@ -1,15 +1,30 @@ --- title: fill slug: Web/SVG/Attribute/fill +l10n: + sourceCommit: 5f7c22deaa74973658257aeaa012ac2ec0be87ae --- {{SVGRef}} -**`fill`** 属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で，その要素を塗りつぶす色を意味します．もう 1 つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します． +**`fill`** 属性には使われ方により 2 つの意味があります. 1 つは図形やテキストに使われた場合で，その要素を塗りつぶす色 (_またはグラデーションやパターンなどの SVG ペイント サーバー_) を意味します．もう 1 つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します． -呈示属性(presentation attribute)として全ての要素に適用可能ですが，実際に影響があるのは次の 11 の要素です: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}. +この属性は次の SVG 要素で使用できます。 -アニメーションとしては次の 5 つの要素で使われています: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, and {{SVGElement('set')}}. +- {{SVGElement('circle')}} +- {{SVGElement('ellipse')}} +- {{SVGElement('path')}} +- {{SVGElement('polygon')}} +- {{SVGElement('polyline')}} +- {{SVGElement('rect')}} +- {{SVGElement('text')}} +- {{SVGElement('textPath')}} +- {{SVGElement('tref')}} +- {{SVGElement('tspan')}} + +アニメーションとしては次の要素で使われています: {{SVGElement('animate')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, {{SVGElement('set')}}. + +## 例 ```css hidden html, @@ -50,179 +65,383 @@ svg { ``` -{{EmbedLiveSample('topExample', '100%', 200)}} - -## altGlyph - -> **警告:** As of SVG2 {{SVGElement('altGlyph')}} is deprecated and shouldn't be used. - -For {{SVGElement('altGlyph')}}, `fill` is a presentation attribute that defines the color of the glyph. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{EmbedLiveSample("Example", '100%', 200)}} ## animate -For {{SVGElement('animate')}}, `fill` defines the final state of the animation. - -| Value | `freeze` (_Keep the state of the last animation frame_) \| `remove` (_Keep the state of the first animation frame_) | -| ------------- | ------------------------------------------------------------------------------------------------------------------- | -| Default value | `remove` | -| Animatable | No | - -## animateColor - -> **警告:** As of SVG Animation 2 {{SVGElement('animateColor')}} is deprecated and shouldn't be used. Use {{SVGElement('animate')}} instead. - -For {{SVGElement('animateColor')}}, `fill` defines the final state of the animation. - -| Value | `freeze` (_Keep the state of the last animation frame_) \| `remove` (_Keep the state of the first animation frame_) | -| ------------- | ------------------------------------------------------------------------------------------------------------------- | -| Default value | `remove` | -| Animatable | No | +{{SVGElement('animate')}} は、`fill` はアニメーションの最終状態を定義します。 + + + + + + + + + + + + + + + + +
値 + freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) +
既定値remove
アニメーションNo
## animateMotion -For {{SVGElement('animateMotion')}}, `fill` defines the final state of the animation. - -| Value | `freeze` (_Keep the state of the last animation frame_) \| `remove` (_Keep the state of the first animation frame_) | -| ------------- | ------------------------------------------------------------------------------------------------------------------- | -| Default value | `remove` | -| Animatable | No | +{{SVGElement('animateMotion')}} は、`fill` はアニメーションの最終状態を定義します。 + + + + + + + + + + + + + + + + +
値 + freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) +
既定値remove
アニメーションNo
## animateTransform -For {{SVGElement('animateTransform')}}, `fill` defines the final state of the animation. - -| Value | `freeze` (_Keep the state of the last animation frame_) \| `remove` (_Keep the state of the first animation frame_) | -| ------------- | ------------------------------------------------------------------------------------------------------------------- | -| Default value | `remove` | -| Animatable | No | +{{SVGElement('animateTransform')}} は、`fill` はアニメーションの最終状態を定義します。 + + + + + + + + + + + + + + + + +
値 + freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) +
既定値remove
アニメーションNo
## circle -For {{SVGElement('circle')}}, `fill` is a presentation attribute that defines the color of the circle. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('circle')}} は、`fill` は円の色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## ellipse -For {{SVGElement('ellipse')}}, `fill` is a presentation attribute that defines the color of the ellipse. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('ellipse')}} は、`fill` は楕円の色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## path -For {{SVGElement('path')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_Interior is define by the {{SVGAttr('fill-rule')}} attribute_) - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('path')}} は、`fill` は図形の内部の色を定義するプレゼンテーション属性です。 (_内部は {{SVGAttr('fill-rule')}} 属性によって定義されます_) + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## polygon -For {{SVGElement('polygon')}}, `fill` is a presentation attribute that defines the color of the interior of the shape. (_Interior is define by the {{SVGAttr('fill-rule')}} attribute_) - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('polygon')}} は、`fill` は図形の内部の色を定義するプレゼンテーション属性です。 (_内部は {{SVGAttr('fill-rule')}} 属性によって定義されます_) + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## polyline -For {{SVGElement('polyline')}}, `fill` is a presentation attribute that defines tthe color of the interior of the shape. (_Interior is define by the {{SVGAttr('fill-rule')}} attribute_) - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('polyline')}} は、`fill` は図形の内部の色を定義するプレゼンテーション属性です。 (_内部は {{SVGAttr('fill-rule')}} 属性によって定義されます_) + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## rect -For {{SVGElement('rect')}}, `fill` is a presentation attribute that defines the color of the rectangle. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('rect')}} は、`fill` は四角形の色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## set -For {{SVGElement('set')}}, `fill` defines the final state of the animation. - -| Value | `freeze` (_Keep the state of the last animation frame_) \| `remove` (_Keep the state of the first animation frame_) | -| ------------- | ------------------------------------------------------------------------------------------------------------------- | -| Default value | `remove` | -| Animatable | No | +{{SVGElement('set')}} は、`fill` はアニメーションの最終状態を定義します。 + + + + + + + + + + + + + + + + +
値 + freeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame) +
既定値remove
アニメーションNo
## text -For {{SVGElement('text')}}, `fill` is a presentation attribute that defines what the color of the text. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('text')}} は、`fill` はテキストの色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## textPath -For {{SVGElement('textPath')}}, `fill` is a presentation attribute that defines the color of the text. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('textPath')}} は、`fill` はテキストの色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## tref > **警告:** As of SVG2 {{SVGElement('tref')}} is deprecated and shouldn't be used. -For {{SVGElement('tref')}}, `fill` is a presentation attribute that defines the color of the text. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('tref')}} は、`fill` はテキストの色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## tspan -For {{SVGElement('tspan')}}, `fill` is a presentation attribute that defines the color of the text. - -| Value | **[\](/ja/docs/Web/SVG/Content_type#Paint)** | -| ------------- | --------------------------------------------------- | -| Default value | `black` | -| Animatable | Yes | - -> **メモ:** As a presentation attribute `fill` can be used as a CSS property. +{{SVGElement('tspan')}} は、`fill` はテキストの色を定義するプレゼンテーション属性です。 + + + + + + + + + + + + + + + + +
値 + <paint> +
既定値black
アニメーションYes
+ +> **メモ:** プレゼンテーション属性として `fill` を CSS プロパティとして使用できます。 ## 仕様書 @@ -231,5 +450,3 @@ For {{SVGElement('tspan')}}, `fill` is a presentation attribute that defines the ## ブラウザーの互換性 {{Compat}} - -> **メモ:** For information on using the `context-fill` (and `context-stroke`) values from HTML documents, see the documentation for the non-standard {{cssxref("-moz-context-properties")}} property. diff --git a/files/ja/web/svg/attribute/id/index.md b/files/ja/web/svg/attribute/id/index.md index c64363b8a1f43e..7644817c994bcc 100644 --- a/files/ja/web/svg/attribute/id/index.md +++ b/files/ja/web/svg/attribute/id/index.md @@ -1,6 +1,8 @@ --- title: id slug: Web/SVG/Attribute/id +l10n: + sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a --- {{SVGRef}} @@ -9,13 +11,15 @@ slug: Web/SVG/Attribute/id すべての要素がこの属性を使用します。 +## 例 + ```html -