SVG 属性の説明の一部を新規翻訳

- 2021/10/19 時点の英語版に基づき新規翻訳

5 files changed, 435 insertions, 0 deletions

diff --git a/files/ja/web/svg/attribute/conditional_processing/index.md b/files/ja/web/svg/attribute/conditional_processing/index.md
new file mode 100644
index 0000000000..727aabe1f4
--- /dev/null
+++ b/files/ja/web/svg/attribute/conditional_processing/index.md
@@ -0,0 +1,33 @@
+---
+title: SVG 条件処理属性
+slug: Web/SVG/Attribute/Conditional_Processing
+tags:
+  - 中級者
+  - NeedsExample
+  - プロパティ
+  - リファレンス
+  - SVG
+browser-compat: svg.attributes.conditional_processing
+translation_of: Web/SVG/Attribute/Conditional_Processing
+---
+SVG 条件処理属性は、ある SVG 要素に指定できる、その要素の外見をレンダリングするかどうかを制御するためのすべての属性です。
+
+*   [requiredExtensions](#attr-requiredextensions)
+*   [requiredFeatures](#attr-requiredfeatures)
+*   [systemLanguage](#attr-systemlanguage)
+
+## 属性
+
+*   {{SVGAttr('requiredExtensions')}}
+    *   : 関連する要素のレンダリングをするためにブラウザーが対応しなければならない、ブラウザー固有の機能をすべて列挙します。
+        *値*: 空白区切りの URI のリスト、*アニメーション*: **不可**
+*   {{SVGAttr('requiredFeatures')}} {{deprecated_inline}}
+    *   : 関連する要素のレンダリングができるようにするためにブラウザー対応しなければならない、[SVG 1.1 仕様書で定義されている](https://www.w3.org/TR/SVG11/feature.html)機能をすべて列挙します。
+        *値*: 空白区切りの URI のリスト、*アニメーション*: **不可**
+*   {{SVGAttr('systemLanguage')}}
+    *   : 関連する要素をレンダリングする際に、ユーザーがどの言語を選択しなければならないかを示す。
+        *値*: [A list of comma-separated language ID](https://www.ietf.org/rfc/bcp/bcp47.txt)、*アニメーション*: **不可**
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/svg/attribute/core/index.md b/files/ja/web/svg/attribute/core/index.md
new file mode 100644
index 0000000000..3ea8d9004b
--- /dev/null
+++ b/files/ja/web/svg/attribute/core/index.md
@@ -0,0 +1,52 @@
+---
+title: SVG コア属性
+slug: Web/SVG/Attribute/Core
+tags:
+  - 属性
+  - 中級者
+  - リファレンス
+  - SVG
+browser-compat: svg.attributes.core
+---
+SVG コア属性は、すべての SVG 要素に指定できる共通の属性すべてのことです。
+
+*   [`id`](#attr-id)
+*   [`lang`](#attr-lang)
+*   [`tabindex`](#attr-tabindex)
+*   [`xml:base`](#attr-xml:base)
+*   [`xml:lang`](#attr-xml:lang)
+*   [`xml:space`](#attr-xml:space)
+
+## 属性
+
+*   {{SVGAttr('id')}}
+    *   : 識別子 (ID) を定義し、これは文書全体で一意でなければなりません。これは、リンク (フラグメント識別子を使用)、スクリプト、スタイル付け (CSS) で要素を識別するためのものです。
+        *値*: 任意の有効な ID 文字列、*アニメーション*: **不可**
+*   {{SVGAttr('lang')}}
+    *   : 要素の言語、編集不可能な要素が書かれている言語、または編集可能な要素が書かれるべき言語の定義を行います。このタグには、[IETF の文書 Tags for Identifying Languages (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt) で定義された書式で単一の項目値が含まれます。
+
+        > **Note:** SVG 2 で新しい `lang` 属性が導入されました。`lang` と `xml:lang` の両方の属性が使用された場合は、`xml:lang` が `lang` よりも優先されます。
+
+        *値*: 任意の言語 ID、*アニメーション*: **不可**
+*   {{SVGAttr('tabindex')}}
+    *   : tabindex は SVG の属性で、要素がフォーカス可能かどうかを制御し、シーケンシャルフォーカスナビゲーションの目的で要素の相対的な順序を定義することができます。
+        *値の型*: [\<integer>](/ja/docs/Web/SVG/Content_type#integer); *アニメーション*: **不可**
+*   {{SVGAttr('xml:base')}}
+    *   : 文書のベース IRI 意外にベース IRI を指定します。
+        *値の型*: [\<IRI>](/ja/docs/Web/SVG/Content_type#iri); *アニメーション*: **不可**
+*   {{SVGAttr('xml:lang')}}
+    *   : これは、要素が含む人間の自然言語をマークアップするために、すべての XML の方言で認められている普遍的な属性です。使い方は HTML の [lang](/ja/docs/Web/HTML/Global_attributes/lang) とほぼ同じですが、XML 1.0 に適合する文書では、未知の言語を示すための NULL 属性値 (`xml:lang=""`) の使用は認められていません。代わりに、`xml:lang="und"` を使用してください。
+
+        > **Note:** SVG 2 で新しい `lang` 属性が導入されました。`lang` と `xml:lang` の両方の属性が使用された場合は、`xml:lang` が `lang` よりも優先されます。
+
+        *値*: 任意の言語 ID、*アニメーション*: **不可**
+*   {{SVGAttr('xml:space')}} {{deprecated_inline}}
+    *   : SVG は標準の XML 属性 `xml:space` に対応しており、与えられた {{ SVGElement("text") }} 要素の文字データに含まれるホワイトスペース文字の扱いを指定します。
+
+        > **Note:** `xml:space` 属性を使用する代わりに、CSS の {{cssxref('white-space')}} プロパティを使用してください。
+
+        *値*: **`default`** | `preserve`; *アニメーション*: **不可**
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/svg/attribute/events/index.md b/files/ja/web/svg/attribute/events/index.md
new file mode 100644
index 0000000000..eda59bc064
--- /dev/null
+++ b/files/ja/web/svg/attribute/events/index.md
@@ -0,0 +1,46 @@
+---
+title: SVG イベント属性
+slug: Web/SVG/Attribute/Events
+tags:
+  - 上級者
+  - 属性
+  - 草稿
+  - Landing
+  - NeedsUpdate
+  - SVG
+browser-compat: svg.attributes.events.global
+translation_of: Web/SVG/Attribute/Events
+---
+イベント属性は、常に "on" で始まる名前を持ち、その後に目的とするイベントの名前が続きます。これらの属性は、属性が指定された要素に与えられた種類のイベントが発行されたときに実行される何らかのスクリプトを指定します。
+
+ブラウザーが対応するすべての種類のイベントについて、SVG は HTML イベント属性と同じ要件に従い、イベント属性として対応しています。
+
+グローバルイベント属性は*すべての SVG 要素*で使用可能です。その他のイベント属性の使用可否は要素によります。
+
+イベント属性はすべて、*アニメーション不可*です。
+
+## 属性
+
+### アニメーションイベント属性
+
+**`onbegin`**, **`onend`**, **`onrepeat`**
+
+### 文書イベント属性
+
+**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**
+
+### 文書要素イベント属性
+
+**`oncopy`**, **`oncut`**, **`onpaste`**
+
+### グローバルイベント属性
+
+**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**
+
+### グラフィックイベント属性
+
+**`onactivate`**, **`onfocusin`**, **`onfocusout`**
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/svg/attribute/presentation/index.md b/files/ja/web/svg/attribute/presentation/index.md
new file mode 100644
index 0000000000..12a152cb1c
--- /dev/null
+++ b/files/ja/web/svg/attribute/presentation/index.md
@@ -0,0 +1,276 @@
+---
+title: SVG プレゼンテーション属性
+slug: Web/SVG/Attribute/Presentation
+tags:
+  - 属性
+  - 初心者
+  - 草稿
+  - リファレンス
+  - SVG
+browser-compat: svg.attributes.presentation
+---
+SVG プレゼンテーション属性は、SVG 要素の属性として使用される CSS プロパティです。
+
+*   [alignment-baseline](#attr-alignment-baseline)
+*   [baseline-shift](#attr-baseline-shift)
+*   [clip](#attr-clip)
+*   [clip-path](#attr-clip-path)
+*   [clip-rule](#attr-clip-rule)
+*   [color](#attr-color)
+*   [color-interpolation](#attr-color-interpolation)
+*   [color-interpolation-filters](#attr-color-interpolation-filters)
+*   [color-profile](#attr-color-profile)
+*   [color-rendering](#attr-color-rendering)
+*   [cursor](#attr-cursor)
+*   [d](#attr-d)
+*   [direction](#attr-direction)
+*   [display](#attr-display)
+*   [dominant-baseline](#attr-dominant-baseline)
+*   [enable-background](#attr-enable-background)
+*   [fill](#attr-fill)
+*   [fill-opacity](#attr-fill-opacity)
+*   [fill-rule](#attr-fill-rule)
+*   [filter](#attr-filter)
+*   [flood-color](#attr-flood-color)
+*   [flood-opacity](#attr-flood-opacity)
+*   [font-family](#attr-font-family)
+*   [font-size](#attr-font-size)
+*   [font-size-adjust](#attr-font-size-adjust)
+*   [font-stretch](#attr-font-stretch)
+*   [font-style](#attr-font-style)
+*   [font-variant](#attr-font-variant)
+*   [font-weight](#attr-font-weight)
+*   [glyph-orientation-horizontal](#attr-glyph-orientation-horizontal)
+*   [glyph-orientation-vertical](#attr-glyph-orientation-vertical)
+*   [image-rendering](#attr-image-rendering)
+*   [kerning](#attr-kerning)
+*   [letter-spacing](#attr-letter-spacing)
+*   [lighting-color](#attr-lighting-color)
+*   [marker-end](#attr-marker-end)
+*   [marker-mid](#attr-marker-mid)
+*   [marker-start](#attr-marker-start)
+*   [mask](#attr-mask)
+*   [opacity](#attr-opacity)
+*   [overflow](#attr-overflow)
+*   [pointer-events](#attr-pointer-events)
+*   [shape-rendering](#attr-shape-rendering)
+*   [solid-color](#attr-solid-color)
+*   [solid-opacity](#attr-solid-opacity)
+*   [stop-color](#attr-stop-color)
+*   [stop-opacity](#attr-stop-opacity)
+*   [stroke](#attr-stroke)
+*   [stroke-dasharray](#attr-stroke-dasharray)
+*   [stroke-dashoffset](#attr-stroke-dashoffset)
+*   [stroke-linecap](#attr-stroke-linecap)
+*   [stroke-linejoin](#attr-stroke-linejoin)
+*   [stroke-miterlimit](#attr-stroke-miterlimit)
+*   [stroke-opacity](#attr-stroke-opacity)
+*   [stroke-width](#attr-stroke-width)
+*   [text-anchor](#attr-text-anchor)
+*   [text-decoration](#attr-text-decoration)
+*   [text-rendering](#attr-text-rendering)
+*   [transform](#attr-transform)
+*   [unicode-bidi](#attr-unicode-bidi)
+*   [vector-effect](#attr-vector-effect)
+*   [visibility](#attr-visibility)
+*   [word-spacing](#attr-word-spacing)
+*   [writing-mode](#attr-writing-mode)
+
+## 属性
+
+*   {{SVGAttr('alignment-baseline')}}
+    *   : これは、オブジェクトが親に対してフォントのベースラインに沿ってどのように配置されるかを指定するものです。
+        *値*: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('baseline-shift')}}
+    *   : これにより、親テキストコンテンツ要素のドミナントベースラインに対するドミナントベースラインの相対的な位置を変更することができます。
+        *値*: **`auto`**|`baseline`|`super`|`sub`|[\<percentage>](/ja/docs/Web/SVG/Content_type#percentage)|[\<length>](/ja/docs/Web/SVG/Content_type#length)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('clip')}} {{deprecated_inline}}
+    *   : 要素のどの部分が見えるかを定義します。
+        *値*: **`auto`**|{{cssxref("shape")}}|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('clip-path')}}
+    *   : 適用された要素を指定された {{SVGElement('clipPath')}} 要素に結びつけます。
+        *値*: **`none`**|[\<FuncIRI>](/ja/docs/Web/SVG/Content_type#funciri)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('clip-rule')}}
+    *   : {{SVGElement('clipPath')}} が対象を切り取る方法を知るために、パスのどの辺がシェイプの内側にあるかを判断する方法を指定します。
+        *値*: **`nonezero`**|`evenodd`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('color')}}
+    *   : 間接的な値の候補 (`currentcolor`) を `fill`, `stroke`, `stop-color`, `flood-color`, `lighting-color` の各属性に与えるために使用します。
+        *値*: [\<color>](/ja/docs/Web/SVG/Content_type#color)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('color-interpolation')}}
+    *   : グラデーションの補間、色のアニメーション、アルファ合成で使用する色空間を指定します。
+        *値*: `auto`|**`sRGB`**|`linearRGB`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('color-interpolation-filters')}}
+    *   : フィルター効果を通して行われる画像演算で使用する色空間を指定します。
+        *値*: `auto`|`sRGB`|**`linearRGB`**|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('color-profile')}} {{deprecated_inline}}
+    *   : {{SVGElement('image')}} 要素を通して取り込まれるラスター画像に使用すべきカラープロファイルを定義します。
+        *値*: `auto`|`sRGB`|`linearRGB`|[\<name>](/ja/docs/Web/SVG/Content_type#name)|[\<IRI>](/ja/docs/Web/SVG/Content_type#iri)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('color-rendering')}}
+    *   : これは、色の補間や合成の操作を最適化するためのヒントをブラウザーに与えます。
+        *値*: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('cursor')}}
+    *   : マウスポインターが要素上に来た場合に表示されるマウスカーソルを指定します。
+        *値*: [\<FuncIRI>](/ja/docs/Web/SVG/Content_type#funciri)|[\<keywords>](/ja/docs/Web/CSS/cursor#values)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('d')}}
+    *   : 描画するパスを定義します。
+        *値*: [path()](/ja/docs/Web/CSS/path\(\))|`none`
+*   {{SVGAttr('direction')}}
+    *   : テキストの基本的な書字方向を指定します。
+        *値*: **`ltr`**|`rtl`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('display')}}
+    *   : グラフィックやコンテナー要素の表示を制御することができます。
+        *値*: CSS の{{cssxref('display')}}、*アニメーション*: **可**
+*   {{SVGAttr('dominant-baseline')}}
+    *   : ボックスのテキストやインラインレベルのコンテンツを配置するために使用されるベースラインを定義します。
+        *値*: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`、*アニメーション*: **可**
+*   {{SVGAttr('enable-background')}} {{deprecated_inline}}
+    *   : 背景画像の蓄積をどのように管理するかをブラウザーに伝えます。
+        *値*: **`accumulate`**|`new`|`inherit`; *アニメーション*: **不可**
+*   {{SVGAttr('fill')}}
+    *   : 適用されるグラフィック要素の内側の色を定義します。
+        *値*: [\<paint>](/ja/docs/Web/SVG/Content_type#paint)、*アニメーション*: **可**
+*   {{SVGAttr('fill-opacity')}}
+    *   : 現在のオブジェクトが塗りつぶされる色やコンテンツの不透明度を指定します。
+        *値*: [\<number>](/ja/docs/Web/SVG/Content_type#number)|[\<percentage>](/ja/docs/Web/SVG/Content_type#percentage)、*アニメーション*: **可**
+*   {{SVGAttr('fill-rule')}}
+    *   : パスのどの辺がシェイプの内側にあるかを判断する方法を示します。
+        *値*: **`nonzero`**|`evenodd`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('filter')}}
+    *   : {{SVGElement('filter')}} 要素で定義されたフィルター効果を、その要素に適用することを定義します。
+        *値*: [\<FuncIRI>](/ja/docs/Web/SVG/Content_type#funciri)|**`none`**|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('flood-color')}}
+    *   : {{SVGElement('feFlood')}} または {{SVGElement('feDropShadow')}} 要素で定義された現在のフィルタープリミティブの部分領域を塗りつぶすために使用する色を示します。
+        *値*: [\<color>](/ja/docs/Web/SVG/Content_type#color)、*アニメーション*: **可**
+*   {{SVGAttr('flood-opacity')}}
+    *   : {{SVGElement('feFlood')}} または {{SVGElement('feDropShadow')}} 要素で定義された現在のフィルタープリミティブの部分領域で使用する不透明度の値を示します。
+        *値*: [\<number>](/ja/docs/Web/SVG/Content_type#number)|[\<percentage>](/ja/docs/Web/SVG/Content_type#percentage)、*アニメーション*: **可**
+*   {{SVGAttr('font-family')}}
+    *   : 要素のテキストを描画するためにどのフォントファミリーが使用されるかを示します。
+        *値*: CSS の{{cssxref('font-family')}} を参照、*アニメーション*: **可**
+*   {{SVGAttr('font-size')}}
+    *   : フォントの大きさを指定します。
+        *値*: CSS の{{cssxref('font-size')}} を参照、*アニメーション*: **可**
+*   {{SVGAttr('font-size-adjust')}}
+    *   : 大文字の高さではなく、小文字の高さに基づいてフォントの大きさを選択することを指定します。
+        *値*: [\<number>](/ja/docs/Web/SVG/Content_type#number)|**`none`**|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('font-stretch')}}
+    *   : フォントのフェイスを normal, condensed, expanded から選択します。
+        *値*: CSS の {{cssxref('font-stretch')}} を参照、*アニメーション*: **可**
+*   {{SVGAttr('font-style')}}
+    *   : これは、フォントの {{SVGAttr('font-family')}} から、通常、イタリック体、斜体のいずれのスタイルにするかを指定します。
+        *値*: **`normal`**|`italic`|`oblique`、*アニメーション*: **可**
+*   {{SVGAttr('font-variant')}}
+    *   : スモールキャップや合字など、フォントのバリエーションの一部を使用するかどうかを指定します。
+        *値*: CSS の{{cssxref('font-variant')}}、*アニメーション*: **可**
+*   {{SVGAttr('font-weight')}}
+    *   : フォントの太さを指定します。
+        *値*: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`、*アニメーション*: **可**
+*   {{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline}}
+    *   : inline-progression-direction が horizontal の場合の字体の向きを制御します。
+        *値*: [\<angle>](/ja/docs/Web/SVG/Content_type#angle)|`inherit`; *アニメーション*: **不可**
+*   {{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline}}
+    *   : inline-progression-direction が vertical の場合の字体の向きを制御します。
+        *値*: **`auto`**|[\<angle>](/ja/docs/Web/SVG/Content_type#angle)|`inherit`; *アニメーション*: **不可**
+*   {{SVGAttr('image-rendering')}}
+    *   : 画像処理を行う際に、速度と品質のどちらを重視するかのヒントをブラウザーに与えます。
+        *値*: **`auto`**|`optimizeQuality`|`optimizeSpeed`、*アニメーション*: **可**
+*   {{SVGAttr('kerning')}} {{deprecated_inline}}
+    *   : ブラウザーが字間を調整するかどうかを示します。
+        *値*: **`auto`**|[\<length>](/ja/docs/Web/SVG/Content_type#length)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('letter-spacing')}}
+    *   : テキスト文字の間の字間を制御します。
+        *値*: **`normal`**|[\<length>](/ja/docs/Web/SVG/Content_type#length)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('lighting-color')}}
+    *   : フィルタープリミティブ要素 {{SVGElement('feDiffuseLighting')}} および {{SVGElement('feSpecularLighting')}} のための光源のの色を定義します。
+        *値*: [\<color>](/ja/docs/Web/SVG/Content_type#color)、*アニメーション*: **可**
+*   {{SVGAttr('marker-end')}}
+    *   : これは、与えられた {{SVGElement('path')}} 要素や基本図形の最後の頂点に描かれる矢尻やポリマーカーを定義します。
+        *値*: [\<FuncIRI>](/ja/docs/Web/SVG/Content_type#funciri)|**`none`**|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('marker-mid')}}
+    *   : これは、与えられた {{SVGElement('path')}} 要素や基本図形の最初と最後を除いた頂点に描かれる矢尻やポリマーカーを定義します。
+        *値*: [\<FuncIRI>](/ja/docs/Web/SVG/Content_type#funciri)|**`none`**|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('marker-start')}}
+    *   : これは、与えられた {{SVGElement('path')}} 要素や基本図形の最初の頂点に描かれる矢尻やポリマーカーを定義します。
+        *値*: [\<FuncIRI>](/ja/docs/Web/SVG/Content_type#funciri)|**`none`**|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('mask')}}
+    *   : 特定の位置で画像をマスクしたり切り取ったりすることで、要素の可視性を変更します。
+        *値*: CSS の{{cssxref('mask')}}、*アニメーション*: **可**
+*   {{SVGAttr('opacity')}}
+    *   : 単一のオブジェクトまたはオブジェクトのグループの透過性を指定します。
+        *値*: [\<opacity-value>](/ja/docs/Web/SVG/Content_type#opacity_value)、*アニメーション*: **可**
+*   {{SVGAttr('overflow')}}
+    *   : ブロックレベル要素のコンテンツが要素のボックスからはみ出したときに切り取るかどうかを指定します。
+        *値*: **`visible`**|`hidden|scroll`|`auto`|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('pointer-events')}}
+    *   : 要素がマウスイベントのターゲットになれるかどうか、いつなるかを定義します。
+        *値*: `bounding-box`|**`visiblePainted`**|`visibleFil`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`、*アニメーション*: **可**
+*   {{SVGAttr('shape-rendering')}}
+    *   : ブラウザーが {{SVGElement('path')}} 要素や基本的な図形を描画する際に、どのようなトレードオフを行うかについてのヒントです。
+        *値*: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('solid-color')}}
+    *   : -
+        *値*:; *Animatable*: **-**
+*   {{SVGAttr('solid-opacity')}}
+    *   : -
+        *値*:; *Animatable*: **-**
+*   {{SVGAttr('stop-color')}}
+    *   : グラデーションの色停止点で使用する色を示します。
+        *値*: `currentcolor`|[\<color>](/ja/docs/Web/SVG/Content_type#color)|[\<icccolor>](/ja/docs/Web/SVG/Content_type#icccolor)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('stop-opacity')}}
+    *   : グラデーションの色停止点の(不)透明度を定義します。
+        *値*: [\<opacity-value>](/ja/docs/Web/SVG/Content_type#opacity_value)|`inherit`、*アニメーション*: **可**
+*   {{SVGAttr('stroke')}}
+    *   : 図形の輪郭を描くのに使用する色を定義します。
+        *値*: [\<paint>](/ja/docs/Web/SVG/Content_type#paint)、*アニメーション*: **可**
+*   {{SVGAttr('stroke-dasharray')}}
+    *   : 図形の輪郭を描くのに使用する破線と隙間のパターンを定義します。
+        *値*: `none`|`<dasharray>`、*アニメーション*: **可**
+*   {{SVGAttr('stroke-dashoffset')}}
+    *   : 関連するダッシュ配列を描画する際のオフセットを定義します。
+        *値*: [\<percentage>](/ja/docs/Web/SVG/Content_type#percentage)|[\<length>](/ja/docs/Web/SVG/Content_type#length)、*アニメーション*: **可**
+*   **{{SVGAttr('stroke-linecap')}}**
+    *   : 開いたサブパスを描いたときに、その端点に使用する形状を定義します。
+        *値*: **`butt`**|`round`|`square`、*アニメーション*: **可**
+*   **{{SVGAttr('stroke-linejoin')}}**
+    *   : パスの角を描いたときに使用する形状を定義します。
+        *値*: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`、*アニメーション*: **可**
+*   **{{SVGAttr('stroke-miterlimit')}}**
+    *   : マイター結合の描画に使用される {{ SVGAttr("stroke-width") }} に対するマイターの長さの比率の制限を定義します。
+        *値*: [\<number>](/ja/docs/Web/SVG/Content_type#number)、*アニメーション*: **可**
+*   **{{SVGAttr('stroke-opacity')}}**
+    *   : 図形の線の(不)透明度を定義します。
+        *値*: [\<opacity-value>](/ja/docs/Web/SVG/Content_type#opacity_value)|[\<percentage>](/ja/docs/Web/SVG/Content_type#paint)、*アニメーション*: **可**
+*   **{{SVGAttr('stroke-width')}}**
+    *   : 図形に適用される線の太さを定義します。
+        *値*: [\<length>](/ja/docs/Web/SVG/Content_type#length)|[\<percentage>](/ja/docs/Web/SVG/Content_type#percentage)、*アニメーション*: **可**
+*   **{{SVGAttr('text-anchor')}}**
+    *   : テキストの文字列の垂直方向の配置を定義します。
+        *値*: `start`|`middle`|`end`|**`inherit`**、*アニメーション*: **可**
+*   **{{SVGAttr('text-decoration')}}**
+    *   : テキストの装飾線の外見を設定します。
+        *値*: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**、*アニメーション*: **可**
+*   **{{SVGAttr('text-rendering')}}**
+    *   : ブラウザーでテキストを描画する際に何をトレードオフにするかについてのヒントです。
+        *値*: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`、*アニメーション*: **可**
+*   **{{SVGAttr('transform')}}**
+    *   : 要素と要素の子に適用される座標変換定義のリストを定義します。
+        *値*: [\<transform-list>](/ja/docs/Web/SVG/Content_type#transform-list)、*アニメーション*: **可**
+*   **{{SVGAttr('unicode-bidi')}}**
+    *   : -
+        *値*:; *Animatable*: **-**
+*   **{{SVGAttr('vector-effect')}}**
+    *   : オブジェクトを描画する際に使用するベクター効果を指定します。
+        *値*: `default`|`non-scaling-stroke`|`inherit`|`<uri>`、*アニメーション*: **可**
+*   **{{SVGAttr('visibility')}}**
+    *   : グラフィック要素の可視性を制御することができます。
+        *値*: **`visible`**|`hidden`|`collapse`|`inherit`、*アニメーション*: **可**
+*   **{{SVGAttr('word-spacing')}}**
+    *   : 単語間の空白の動作を指定します。
+        *値*: [\<length>](/ja/docs/Web/SVG/Content_type#length)|**`inherit`**、*アニメーション*: **可**
+*   **{{SVGAttr('writing-mode')}}**
+    *   : {{SVGElement('text')}} 要素の最初のインライン進行方向を、左から右、右から左、上から下のどれにするかを指定します。
+        *値*: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`、*アニメーション*: **可**
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/svg/attribute/styling/index.md b/files/ja/web/svg/attribute/styling/index.md
new file mode 100644
index 0000000000..a30dc9e27a
--- /dev/null
+++ b/files/ja/web/svg/attribute/styling/index.md
@@ -0,0 +1,28 @@
+---
+title: SVG スタイル付け属性
+slug: Web/SVG/Attribute/Styling
+tags:
+  - 属性
+  - 初心者
+  - NeedsExample
+  - リファレンス
+  - SVG
+browser-compat: svg.attributes.style
+---
+SVG のスタイル付け属性は、CSS スタイリング効果を適用するために任意の SVG 要素に指定できるすべての属性です。
+
+*   [`class`](#attr-class)
+*   [`style`](#attr-style)
+
+## 属性
+
+*   {{SVGAttr('class')}}
+    *   : 要素に 1 つまたは複数のクラス名を割り当てます。HTML の {{htmlattrxref('class')}} 属性と同様の機能を持ちます。
+        *値*: 任意の ID 文字列、*アニメーション*: **可**
+*   {{SVGAttr('style')}}
+    *   : その要素のスタイル情報を指定します。HTML の {{htmlattrxref('style')}} 属性と同様の機能を持ちます。
+        *値*: 任意のスタイル文字列、*アニメーション*: **不可**
+
+## ブラウザーの互換性
+
+{{Compat}}