recursal/MDN huggingface dataset:
filterUnits
===========

« SVG Attribute reference home

`filterUnits`属性は、 `x`, `y`, `width (en-US)` そして `height (en-US)` の座標系を定義します。

もし`filterUnits`属性が指定されていない場合、`objectBoundingBox`が指定されているのと同じになります。

Usage context
-------------

| Categories | *None* |
| --- | --- |
| Value | `userSpaceOnUse` | **`objectBoundingBox`** |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

userSpaceOnUse

`x`, `y`, `width (en-US)` and `height (en-US)` represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the `<filter>` (en-US) element is referenced (i.e., the user coordinate system for the element referencing the `<filter>` (en-US) element via a `filter (en-US)` attribute).

objectBoundingBox

In that case, `x`, `y`, `width (en-US)` and `height (en-US)` represent fractions or percentages of the bounding box on the referencing element.

例
-

Elements
--------

The following elements can use the `filterUnits` attribute:

* `<filter>` (en-US)
stroke-dashoffset
=================

**`stroke-dashoffset`** 属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。

**メモ:** プレゼンテーション属性として、**`stroke-dashoffset`** は CSS プロパティとして使用することができます。

プレゼンテーション属性として、それは、いくつかの要素に適用させることができますが、次の 12 個の要素にのみ効果があります。

`<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<line>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), and `<tspan>`
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- No dash array -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- No dash offset -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!--
 The start of the dash array computation
 is pulled by 3 user units
 -->
  <line
 x1="0"
 y1="5"
 x2="30"
 y2="5"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="3" />

  <!--
 The start of the dash array computation
 is pushed by 3 user units
 -->
  <line
 x1="0"
 y1="7"
 x2="30"
 y2="7"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="-3" />

  <!--
 The start of the dash array computation
 is pulled by 1 user units which ends up
 in the same rendering as the previous example
 -->
  <line
 x1="0"
 y1="9"
 x2="30"
 y2="9"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="1" />

  <!--
 the following red lines highlight the
 offset of the dash array for each line
 -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
</svg>
```

Usage notes
-----------

| Value | **<percentage>** | **<length>** |
| --- | --- |
| Default value | `0` |
| Animatable | Yes |

The offset is usually expressed in user units resolved against the `pathLength (en-US)` but if a <percentage> is used, the value is resolved as a percentage of the current viewport.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Specification
-------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |
fill-opacity
============

**`fill-opacity`** 属性は、図形に適用されるペイントサーバー(*色*, *勾配*, *パターン*, 等)の不透明度を定義するプレゼンテーション属性です。

**メモ:** プレゼンテーション属性としての`fill-opacity`CSS プロパティに適用できます。

この属性は次の SVG 要素で使用できます。

* `<circle>`
* `<ellipse>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>` (en-US)
* `<tref>` (en-US)
* `<tspan>`
例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 既定のfill不透明度: 1 -->
  <circle cx="50" cy="50" r="40" />

  <!-- 数値で指定するfill不透明度 -->
  <circle cx="150" cy="50" r="40" fill-opacity="0.7" />

  <!-- 割合で指定するfill不透明度 -->
  <circle cx="250" cy="50" r="40" fill-opacity="50%" />

  <!-- CSSプロパティで指定するfill不透明度 -->
  <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
```

使用上の注意
------

|  |  |
| --- | --- |
| 値 | `[0-1]` |
 **<percentage>** |
| 規定値 | `1` |
| アニメーション | Yes |

**メモ:** SVG2 では、`fill-opacity`への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(*以下のブラウザー実装状況を参照*)。最良の実装としては、不透明度を`[0-1]`の範囲の値として指定することです。

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # FillOpacity |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
id
==

**`id`** 属性は要素に固有の名前を割り当てます。

すべての要素がこの属性を使用します。

例
-


```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <style>
 <![CDATA[
 #smallRect {
 stroke: #000066;
 fill: #00cc00;
 }
 ]]>
 </style>

  <rect id="smallRect" x="10" y="10" width="100" height="100" />
</svg>
```

使用上の注意
------

|  |  |
| --- | --- |
| 値 | <id> |
| 既定値 | *None* |
| アニメーション | いいえ |

<id>

要素の ID を指定します。 ID はノードツリー内で固有でなければならず、空文字列であってはならず、ホワイトスペース文字を含んではなりません。

**メモ:** URL の対象フラグメントとして使用されるときに `id` の値に SVG view 仕様書として解釈される値 (例えば `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`) や、基本メディアフラグメントを使用しないでください。

XML 文書内で妥当でなければなりません。独立した SVG 文書は XML 1.0 の構文を使用しており、有効な ID は指定された文字 (文字、数字、いくつかの句読点) のみを含み、数字、フルストップ (.) 文字、ハイフンマイナス (-) 文字で始まらないことを指定しています。

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Core.attrib |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML `id`
* `class (en-US)`
lengthAdjust
============

SVG の `<text>` 要素または `<tspan>` 要素が特定の長さを有している場合、それは `textLength` 属性を使って設定したものである訳ですが、`lengthAdjust` 属性は、テキストをその長さに引き延ばすかあるいはその長さに圧縮する方法を制御します。

この属性で可能な二つの値は、 **`spacing`** と **`spacingAndGlyphs`** です。`spacing` (デフォルト値) を使うと、文字の形が保たれる一方で、文字同士の間のスペースが伸び縮みします。`spacingAndGlyphs` を使うと、テキスト要素全体が、そのテキストの方向に沿って引き延ばされます。

lengthAdjust を用いた SVG テキストの調整
-----------------------------

### HTML の内容


```html
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <g font-face="sans-serif">
    <text x="0" y="20" textLength="300" lengthAdjust="spacing">
      Stretched using spacing only.
    </text>
    <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
      Stretched using spacing and glyphs.
    </text>
    <text x="0" y="80" textLength="100" lengthAdjust="spacing">
      Shrunk using spacing only.
    </text>
    <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
      Shrunk using spacing and glyphs.
    </text>
  </g>
</svg>
```

### 結果
stroke-dasharray
================

**`stroke-dasharray`** 属性は、 輪郭を描くために使用される、破線や間隔のある線のパターンを定義するプレゼンテーション属性です。

**メモ:** プレゼンテーション属性として、**`stroke-dasharray`** 属性は、CSS プロパティとして使用することができます。

プレゼンテーション属性として、それはいくつかの要素に適用することができますが、つぎの 12 個の要素にのみ効果があります。

* `<altGlyph>`
* `<circle>`
* `<ellipse>`
* `<path>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>` (en-US)
* `<tref>` (en-US)
* `<tspan>`
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line
 x1="0"
 y1="9"
 x2="30"
 y2="9"
 stroke="black"
 stroke-dasharray="4 1 2 3" />
</svg>
```

Usage notes
-----------

| Value | `none` | *<dasharray>* |
| --- | --- |
| Default value | `none` |
| Animatable | Yes |

*<dasharray>*

A list of comma and/or white space separated *<length>*s and *<percentage>*s that specify the lengths of alternating dashes and gaps.

If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, `5,3,2` is equivalent to `5,3,2,5,3,2`.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Specification
-------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashing |
color
=====

**`color`** 属性は、間接的な値の候補である `currentcolor` を `fill`, `stroke`, `stop-color`, `flood-color (en-US)`, `lighting-color (en-US)` の各属性に与えるために使用します。

**メモ:** プレゼンテーション属性として、`color` は CSS プロパティとして使用できます。詳しい情報は CSS 色 を参照してください。

プレゼンテーション属性として、任意の要素に適用することができますが、上記のように SVG 要素には直接影響を与えません。

使用上のメモ
------

|  |  |
| --- | --- |
| 値 | `<color>`
 | `inherit` |
| 既定値 | ユーザーエージェントによる |
| アニメーション | 可 |

例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g color="green">
    <rect width="50" height="50" fill="currentcolor" />
    <circle
 r="25"
 cx="70"
 cy="70"
 stroke="currentcolor"
 fill="none"
 stroke-width="5" />
  </g>
</svg>
```

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
stop-color
==========

**`stop-color`** 属性は、グラデーションの色停止点で使用する色を示します。

**メモ:** グラデーションに関して、SVG は `transparent` キーワードを CSS とは異なる方法で扱います。SVG はグラデーションを事前に乗算された空間で計算しないので、`transparent` は実際には透明な黒を意味します。そのため、`stop-color` に `transparent` という値を指定することは、`stop-color` に `black` という値を指定し、`stop-opacity (en-US)` に `0` という値を指定することと同じです。

**メモ:** プレゼンテーション属性である `stop-color` は、CSS プロパティとして使用することができます。

この属性は以下の SVG 要素で使用することができます。

* `<stop>`
使用上のメモ
------

|  |  |
| --- | --- |
| 値 | `currentcolor` |
 `<color>`
`<icccolor>` |
| 既定値 | `black` |
| アニメーション | 可 |

`currentcolor`

このキーワードは、現在の塗りつぶしの色を表し、 `<paint>` の指定の中で、`fill` および `stroke` 属性と同じ方法で指定することができます。

`<color>`

この値は色の値を示します。

`<icccolor>`

この値は ICC カラープロファイルを参照します。

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StopColorProperty |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `stop-opacity (en-US)`
r
=

**`r`** 属性は円の半径を定義します。

この属性は次の SVG 要素で使用できます。

* `<circle>`
* `<radialGradient>`
例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>
```

circle
------

`<circle>` に関しては、`r` は、円の半径を定めており、したがって、その円の大きさを定めています。ゼロ以下の値を用いると、その円はまったく描画されません。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| デフォルト値 | `0` |
| アニメーション可能か | Yes |

**メモ:** SVG2 からは、`r` は *幾何属性 (Geometry Property)* です。これが意味することは、`r` 属性を `circle` の CSS 属性としても使える、ということです。

radialGradient
--------------

`<radialGradient>` に関しては、`r` は、放射状グラデーションの末端の円の半径を定めています。

グラデーションの **100%** にあたるピン留め箇所 (stop) が、この末端の円の外周にマッピングされるように、グラデーションが描画されます。ゼロ以下の値を用いると、グラデーションの最後の `<stop>` の色と不透明度を使った単一の色で、当該領域を塗りつぶすことになります。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| デフォルト値 | `50%` |
| アニメーション可能か | Yes |

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |
SVG コア属性
========

SVG コア属性は、すべての SVG 要素に指定できる共通の属性すべてのことです。

* `id`
* `lang`
* `tabindex`
* `xml:base`
* `xml:lang`
* `xml:space`
属性
--

`id`

 識別子 (ID) を定義し、これは文書全体で一意でなければなりません。これは、リンク (フラグメント識別子を使用)、スクリプト、スタイル付け (CSS) で要素を識別するためのものです。
 *値*: 任意の有効な ID 文字列、*アニメーション*: **不可**

`lang (en-US)`

要素の言語、編集不可能な要素が書かれている言語、または編集可能な要素が書かれるべき言語の定義を行います。このタグには、IETF の文書 Tags for Identifying Languages (BCP47) で定義された書式で単一の項目値が含まれます。

**メモ:** SVG 2 で新しい `lang` 属性が導入されました。`lang` と `xml:lang` の両方の属性が使用された場合は、`xml:lang` が `lang` よりも優先されます。

*値*: 任意の言語 ID、*アニメーション*: **不可**

`tabindex (en-US)`

 tabindex は SVG の属性で、要素がフォーカス可能かどうかを制御し、シーケンシャルフォーカスナビゲーションの目的で要素の相対的な順序を定義することができます。
 *値の型*: <integer>; *アニメーション*: **不可**

`xml:base (en-US)`

 文書のベース IRI 意外にベース IRI を指定します。
 *値の型*: <IRI>; *アニメーション*: **不可**

`xml:lang (en-US)`

これは、要素が含む人間の自然言語をマークアップするために、すべての XML の方言で認められている普遍的な属性です。使い方は HTML の lang とほぼ同じですが、XML 1.0 に適合する文書では、未知の言語を示すための NULL 属性値 (`xml:lang=""`) の使用は認められていません。代わりに、`xml:lang="und"` を使用してください。

**メモ:** SVG 2 で新しい `lang` 属性が導入されました。`lang` と `xml:lang` の両方の属性が使用された場合は、`xml:lang` が `lang` よりも優先されます。

*値*: 任意の言語 ID、*アニメーション*: **不可**

`xml:space (en-US)` 
非推奨

SVG は標準の XML 属性 `xml:space` に対応しており、与えられた `<text>` 要素の文字データに含まれるホワイトスペース文字の扱いを指定します。

**メモ:** `xml:space` 属性を使用する代わりに、CSS の `white-space` プロパティを使用してください。

*値*: **`default`** | `preserve`; *アニメーション*: **不可**

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
cy
==

**`cy`** 属性は中心の y-座標を定義します。

この属性は次の SVG 要素で使用できます。

* `<circle>`
* `<ellipse>`
* `<radialGradient>`
例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cy="50" cx="50" r="45" />
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

`<circle>`に対して、`cy`は、図形の y-軸の中心を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | Yes |

**メモ:** SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。

ellipse
-------

`<ellipse>`に対して、`cy`は図形中心の y-座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `0` |
| アニメーション | Yes |

**メモ:** SVG2 として開始する場合には、`cy`は*ジオメトリプロパティ*です。これは本属性が円への CSS プロパティとしても利用可能であることを意味します。

radialGradient
--------------

`<radialGradient>`に対して、`cy`は、放射状勾配の終端円の y-座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>** |
| 既定値 | `50%` |
| アニメーション | Yes |

### 例
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CY |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |
SVG イベント属性
==========

イベント属性は、常に "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`**

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVG 条件処理属性
==========

SVG 条件処理属性は、ある SVG 要素に指定できる、その要素の外見をレンダリングするかどうかを制御するためのすべての属性です。

* requiredExtensions
* requiredFeatures
* systemLanguage
属性
--

`requiredExtensions`

 関連する要素のレンダリングをするためにブラウザーが対応しなければならない、ブラウザー固有の機能をすべて列挙します。
 *値*: 空白区切りの URI のリスト、*アニメーション*: **不可**

`requiredFeatures (en-US)` 
非推奨

 関連する要素のレンダリングができるようにするためにブラウザー対応しなければならない、SVG 1.1 仕様書で定義されている機能をすべて列挙します。
 *値*: 空白区切りの URI のリスト、*アニメーション*: **不可**

`systemLanguage (en-US)`

 関連する要素をレンダリングする際に、ユーザーがどの言語を選択しなければならないかを示す。
 *値*: A list of comma-separated language ID、*アニメーション*: **不可**

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
vector-effect
=============

`vector-effect` プロパティは、オブジェクトを描画する際に使用するベクター効果を指定します。ベクター効果は、フィルター、マスク、クリップなど、他にもある合成処理を行う前に適用されます。

**メモ:** 表示属性であるため、`vector-effect` は CSS プロパティとして使用することができます。

この属性は以下の SVG 要素で使用することができます。

* `<circle>`
* `<ellipse>`
* `<foreignObject>`
* `<image>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>` (en-US)
* `<tspan>`
* `<use>`
使用上のメモ
------

|  |  |
| --- | --- |
| 値 | `none` | `non-scaling-stroke` |
 `non-scaling-size` | `non-rotation` |
 `fixed-position` |
| 既定値 | `none` |
| アニメーション | 離散的 |

`none`

この値は、ベクター効果を適用しないことを指定します。つまり、指定する描画で最初に図形の形状を塗りつぶし、次に指定する描画で輪郭線を描くという既定の描画動作が使用されます。

`non-scaling-stroke`

この値は、オブジェクトの輪郭を描画する方法を変更します。通常、輪郭線はユーザー座標系で計算され、その輪郭線の中が（色やグラデーションで）塗られます。この値の結果、輪郭線の幅が要素の座標変換（不均一な拡大縮小やせん断変換を含む）やズームレベルの変更に依存しない視覚効果が得られます。

`non-scaling-size`

この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系の拡大縮小は、ホスティング座標空間からの座標変換が変更されても変化しません。しかし、回転や傾きを抑制するようなことはしません。また、ユーザー座標系の原点も指定しません。この値はユーザー座標系の拡大縮小を抑制するため、`non-scaling-stroke` の特性も持ち合わせています。

`non-rotation`

この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系の回転や傾きの指定は、ホスティング座標空間からの変換変更にもかかわらず、抑制されます。しかし、拡大縮小の抑制は行われません。また、ユーザー座標系の原点を指定することもしません。

`fixed-position`

この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系は、ホスティング座標空間からの座標変換があっても、その位置が修正されます。ただし、回転、傾き、拡大縮小の抑制を指定するものではありません。このベクター効果と `transform` プロパティを同時に定義した場合、そのプロパティがこの効果に使われることになります。

例
-

### 例: vector-effect="non-scaling-stroke"


```html
<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
 d="M10,20 L40,100 L39,200 z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- scaled -->
  <path
 transform="translate(100,0) scale(4,1)"
 d="M10,20 L40,100 L39,200 z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>

  <!-- fixed-->
  <path
 vector-effect="non-scaling-stroke"
 transform="translate(300, 0) scale(4, 1)"
 d="M10,20 L40,100 L39,200 z"
 stroke="black"
 stroke-width="2px"
 fill="none"></path>
</svg>
```


#### 結果

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # VectorEffects |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVG スタイル付け属性
============

SVG のスタイル付け属性は、CSS スタイリング効果を適用するために任意の SVG 要素に指定できるすべての属性です。

* `class`
* `style`
属性
--

`class (en-US)`

 要素に 1 つまたは複数のクラス名を割り当てます。HTML の `class` 属性と同様の機能を持ちます。
 *値*: 任意の ID 文字列、*アニメーション*: **可**

`style (en-US)`

 その要素のスタイル情報を指定します。HTML の `style` 属性と同様の機能を持ちます。
 *値*: 任意のスタイル文字列、*アニメーション*: **不可**

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
points
======

**`points`** 属性は、点のリストを定義します。各点は、ユーザー座標系における X 座標と Y 座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。

この属性は次の SVG 要素で使用できます。

* `<polyline>`
* `<polygon>`
例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polylineは開いた図形となる -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygonは閉じた図形となる -->
  <polygon
 stroke="black"
 fill="none"
 transform="translate(100,0)"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 通常、XとYをカンマで、座標群をスペースで区切るのがベストプラクティスとされます。
 その方法はコードを人間にとって読みやすいものにしてくれます。
 -->
</svg>
```

polyline
--------

`<polyline>`の場合、 `points` で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。

**メモ:** polyline は最初の点と最後の点が接続されない開いた図形となります。


|  |  |
| --- | --- |
| Value | [ `<number>`+ ]# |
| Default value | *none* |
| Animatable | Yes |
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polylineは開いた図形となる -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```

polygon
-------

`<polygon>`の場合、`points` で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。

**メモ:** polygon は最初の点と最後の点が接続された閉じた図形となります。


|  |  |
| --- | --- |
| Value | [ `<number>`+ ]# |
| Default value | *none* |
| Animatable | Yes |
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygonは閉じた図形となる -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute |
| Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute |
stroke-linecap
==============

« SVG 属性リファレンスホーム

`stroke-linecap` 要素は線を引いた時の開いている部分パスの終端の形状を指定します。

プレゼンテーション属性であるため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。

使用可能な場所
-------

| カテゴリ | プレゼンテーション属性 |
| --- | --- |
| 値 | butt | round | square | inherit |
| アニメーション | Yes |
| 標準文書 | SVG 1.1 (2nd Edition) |

例
-


```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <line
 stroke-linecap="butt"
 x1="30"
 y1="30"
 x2="30"
 y2="90"
 stroke="black"
 stroke-width="20" />

  <line
 stroke-linecap="round"
 x1="60"
 y1="30"
 x2="60"
 y2="90"
 stroke="black"
 stroke-width="20" />

  <line
 stroke-linecap="square"
 x1="90"
 y1="30"
 x2="90"
 y2="90"
 stroke="black"
 stroke-width="20" />

  <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" stroke="white" />
</svg>
```

要素
--

以下の要素で `stroke-linecap` を使うことができます

* Shape 要素 »
* Text content 要素 »