recursal/MDN huggingface dataset:
<animate>
=========

SVG の **`<animate>`** 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。
```

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



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
 attributeName="rx"
 values="0;5;0"
 dur="10s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

属性
--

### アニメーション属性

アニメーションタイミング属性
`begin (en-US)`, `dur (en-US)`, `end`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount (en-US)`, `repeatDur (en-US)`, `fill`
アニメーション値属性
`calcMode (en-US)`, `values (en-US)`, `keyTimes (en-US)`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`
その他のアニメーション属性

特に重要なもの: `attributeName (en-US)`, `additive (en-US)`, `accumulate (en-US)`

アニメーションイベント属性

特に重要なもの: `onbegin`, `onend`, `onrepeat`

### グローバル属性

コア属性

特に重要なもの: `id`

スタイル属性
`class (en-US)`, `style (en-US)`
イベント属性

グローバルイベント属性, 文書要素イベント属性

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

この要素は `SVGAnimateElement` (en-US) インターフェイスを実装しています。

アクセシビリティの考慮事項
-------------

点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。

アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 Reduced Motion Media Query を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| SVG Animations Level 2 # AnimateElement |

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

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

**`<polygon>`** 要素は、接続された一連の直線の区間で構成される閉じた図形を定義します。最後の点は最初の点と結ばれます。

開いた図形については `<polyline>` 要素をご覧ください。

例
-
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 既定で塗りつぶす多角形の例 -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- 同じ多角形で線を持ち塗りつぶされない例 -->
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
```

属性
--

`points`

 この属性は多角形を描くのに必要な点 (絶対座標の `x,y` の組) のリストを定義します。
 *値の型*: **<number>**+ ; *既定値*: `""`; *アニメーション*: **可**

`pathLength (en-US)`

 This attribute lets specify the total length for the path, in user units.
 *値の型*: **<number>** ; *既定値*: *none*; *アニメーション*: **可**

### グローバル属性

コア属性

特に重要なもの: `id`, `tabindex (en-US)`

スタイル属性
`class (en-US)`, `style (en-US)`
条件処理属性

特に重要なもの: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性, グラフィックイベント属性

プレゼンテーション属性

特に重要なもの: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

ARIA 属性

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

使い方メモ
-----

|  |  |
| --- | --- |
| カテゴリー | 基本シェイプ要素、グラフィック要素、図形要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |

仕様書
---

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

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

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

関連情報
----

* **他の SVG 基本図形:**
    + `<circle>`
    + `<ellipse>`
    + `<line>`
    + `<polyline>`
    + `<rect>`
title
=====

SVG における各コンテナ要素またはグラフィックス要素の描画は、説明がテキストのみの文字列を含む **`<title>`** 要素を供給することができます。文書フラグメントが SVG 視覚メディアとしてレンダリングされるとき、`<title>` 要素は、グラフィックスの一部としてはレンダリングされません。しかし、一部のユーザーエージェントは、例えば、ツールチップとして `<title>`要素を表示するかもしれません。 `<title>` 要素を表示するが `path` 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方の代替プレゼンテーションが可能です。`<title>` 要素は一般に SVG 文書のアクセシビリティを向上させます。

一般に、`<title>` 要素は その `<title>` 要素の親の最初の子にするべきです。 `<title>`が実際にその `<title>` の親の最初の子要素である場合、ツールチップを表示するためにタイトルを使用する実装のみが表示することに注意してください。

利用可能な場所
-------

|  |  |
| --- | --- |
| カテゴリー | 説明的要素 |
| 許可されている内容 | あらゆる要素や文字データ |

属性
--

### グローバル属性

* コア属性
* `class (en-US)`
* `style (en-US)`
### 専用属性

*この要素には専用属性はありません。*

DOM インターフェイス
------------

この要素は `SVGTitleElement` (en-US) インターフェイスを実装します。

例
-


```xml
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>SVG Title Demo example</title>
    <rect x="10" y="10" width="200" height="50"
 style="fill:none; stroke:blue; stroke-width:1px"/>
  </g>
</svg>
```

仕様
--

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

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

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

関連情報
----

* `<desc>`
<path>
======

**`<path>`** SVG要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。

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

|  |  |
| --- | --- |
| カテゴリー | グラフィック要素、図形要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z" />
</svg>
```

属性
--

`d`

 この属性は図形のパスを定義します。
 *値の型*: **<string>** ; *初期値*: `''`; *アニメーション可否*: **yes**

`pathLength (en-US)`

 この属性は、ユーザ単位系でのパスの全長を指定することを可能にします。
 *値の型*: **<number>** ; *初期値*: *none*; *アニメーション可否*: **yes**

### グローバル属性

コア属性

特に: `id`, `tabindex (en-US)`

スタイル属性
`class (en-US)`, `style (en-US)`
条件処理属性

特に: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性, グラフィカルイベント属性

プレゼンテーション属性

特に: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

ARIA 属性

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

利用ノート
-----

|  |  |
| --- | --- |
| カテゴリー | グラフィック要素、図形要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |

仕様
--

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

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

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

関連情報
----

* SVG 基本図形: `<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>`, `<rect>`
* The MDN SVG "Getting Started" チュートリアル : Path
metadata
========

メタデータはデータに関する構造化データです。SVG コンテンツに含まれているメタデータは、 `metadata` 要素で指定する必要があります。 `metadata` 要素の内容は RDF,FOAF などの他の XML 名前空間からの要素でなければなりません。

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

|  |  |
| --- | --- |
| カテゴリー | 説明的要素 |
| 許可されている内容 | あらゆる要素や文字データ |

例
-

属性
--

### グローバル属性

* コア属性 »
### 専用属性

*この要素には専用属性はありません。*

DOM インターフェース
------------

この要素は `SVGMetadataElement` インターフェースを提供します。

仕様
--

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

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

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

SVG 描画における各コンテナ要素またはグラフィック要素は、説明がテキストのみの **`<desc>`** 要素を用いる説明を供給することができます。

現在の SVG ドキュメントが視覚メディア上で SVG としてレンダリングされるとき、`<desc>` 要素はグラフィックとしてレンダリングされません。 代替プレゼンテーションは、`<desc>` 要素を表示するが `<path>` 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方が可能です。`<desc>` 要素は一般に SVG ドキュメントのアクセシビリティを向上させます。

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

|  |  |
| --- | --- |
| カテゴリー | 説明的要素 |
| 許可されている内容 | あらゆる要素や文字データ |

属性
--

### グローバル属性

* コア属性
* `class (en-US)`
* `style (en-US)`
### 専用属性

*なし。*

DOM インターフェイス
------------

この要素は `SVGDescElement` (en-US) インターフェイスを実装します。

仕様
--

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

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

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

関連情報
----

* `<title>`
g
=

**`<g>`** SVG 要素は、他の SVG 要素をグループ化するために用いられるコンテナです。

`<g>` 要素に適用された変形はその全ての子要素に対して実行されます。適用された属性は子要素に継承されます。加えて、多数のオブジェクトをグループ化しておくと後に `<use>` 要素で参照することができます。

例
-
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>
```

属性
--

この要素はグローバル属性のみを含みます。

### グローバル属性

コア属性

特に: `id`, `tabindex (en-US)`

スタイリング属性
`class (en-US)`, `style (en-US)`
条件処理属性

特に: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性, グラフィカルイベント属性

プレゼンテーション属性

特に: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

Aria 属性

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

利用ノート
-----

|  |  |
| --- | --- |
| カテゴリー | コンテナー要素、構造的要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>` (en-US)、`<filter>` (en-US)、`<font>` (en-US)、`<font-face>` (en-US)、`<foreignObject>`、`<image>`、`<marker>` (en-US)、`<mask>`、`<pattern>`、`<script>`、`<style>` (en-US)、`<switch>`、`<text>`、`<view>` (en-US) |

仕様書
---

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

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

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

SVG **`<text>`** 要素は、テキストからなるグラフィクス要素を定義します。`<text>` には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。

SVG 内でテキストが `<text>` 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、ディスプレイプロパティ (en-US) を変更してもテキストは表示されません。

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

|  |  |
| --- | --- |
| カテゴリー | グラフィック要素、テキストコンテンツ要素 |
| 許可されている内容 | 任意の順で文字データと任意の数の以下の要素。アニメーション要素説明的要素テキストコンテンツの子要素`<a>` |

属性
--

### グローバル属性

* 条件処理属性 »
* コア属性 »
* グラフィカルイベント属性 »
* プレゼンテーション属性 »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### 専用属性

* `x`
* `y`
* `dx`
* `dy (en-US)`
* `text-anchor (en-US)`
* `rotate (en-US)`
* `textLength (en-US)`
* `lengthAdjust`
DOM インターフェイス
------------

この要素は `SVGTextElement` インターフェイスを実装します。

例
-

### 基本的なテキストの使用例

#### SVG


```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 width="500"
 height="40"
 viewBox="0 0 500 40">
  <text x="0" y="35" font-family="Verdana" font-size="35">
    Hello, out there
  </text>
</svg>
```


#### 結果

### 回転テキスト

SVG テキストは回転することができます。

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120">
  <text x="0" y="20" transform="rotate(30 20,40)">
    SVG Text Rotation example
  </text>
</svg>
```


#### 結果

### 着色テキスト

SVG テキストは着色することができます。

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
  <text x="10" y="20" stroke="none" fill="red">SVG Colored Text</text>
</svg>
```


#### 結果

### CSS を用いたテキストのスタイリング

SVG テキストは HTML テキストのようにスタイリングできます。

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
  <text
 x="10"
 y="40"
 style="font-family: Times New Roman;
 font-size: 44px;
 stroke: #00ff00;
 fill: #0000ff;">
    SVG text styling
  </text>
</svg>
```


#### 結果

仕様
--

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

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

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

関連情報
----

* `<tspan>`
* `<tref>` (en-US)
* `<altGlyph>`
<clipPath>
==========

**`<clipPath>`** は SVG の要素で、 `clip-path (en-US)` プロパティで使用されるクリッピングパスを定義します。

クリッピングパスは、描画が適用される領域を制限する。概念的には、クリッピングパスで囲まれた領域の外にある部分は描画されません。

例
-
```

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



```html
<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
 Everything outside the circle will be
 clipped and therefore invisible.
 -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
 id="heart"
 d="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" />

  <!--
 Only the portion of the red heart
 inside the clip circle is visible.
 -->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>
```



```css
/\* With a touch of CSS for browsers who \*
 \* implemented the r Geometry Property. \*/

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}
```


クリッピングパスは、概念的には、参照している要素のカスタムビューポートと同じです。したがって、要素の*レンダリング*に影響を与えますが、要素の*固有のジオメトリー*には影響を与えません。クリッピングされた要素 (`<clipPath>` 要素を `clip-path (en-US)` プロパティで参照している要素、または参照している要素の子) のバウンディングボックスは、クリッピングされていない場合と同じでなければなりません。

既定では、クリップされた領域では `pointer-events` が発行されません。例えば、半径 `10` の円が半径 `5` の円でクリッピングされている場合、小さい方の半径の外側では "click" イベントを受け取ることはありません。

属性
--

`clipPathUnits (en-US)`

`<clipPath>` 要素の内容物の座標系を定義します。
 *値の型*: `userSpaceOnUse`|`objectBoundingBox` ; *既定値*: `userSpaceOnUse`; *アニメーション*: **可**

### グローバル属性

コア属性

最重要なもの: `id`

スタイル付け属性
`class (en-US)`, `style (en-US)`
条件処理属性

最重要なもの: `requiredExtensions`, `systemLanguage (en-US)`

プレゼンテーション属性

最重要なもの: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

利用メモ
----

|  |  |
| --- | --- |
| カテゴリー | 無し |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素`<text>`、`<use>` |

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # ClipPathElement |

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

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

関連情報
----

* クリッピングとマスクの SVG 要素: `<mask>`
* CSS プロパティ: `clip-path`, `pointer-events`
circle
======

**`<circle>`** SVG 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。

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

|  |  |
| --- | --- |
| カテゴリー | 基本シェイプ要素、グラフィック要素、図形要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |

属性値
---

### グローバル属性

* 条件処理属性
* コア属性
* グラフィカルイベント属性
* プレゼンテーション属性
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### 専用属性

* `cx`
* `cy`
* `r`
DOM インターフェイス
------------

この要素は SVGCircleElement (en-US) インターフェイスを実装しています。

例
-

### SVG


```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" />
</svg>
```

### 出力

仕様
--

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

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

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

関連情報
----

* `<ellipse>`
<script>
========

SVG `script` 要素は、HTML の `script` 要素と同じく、 スクリプト（例えば ECMAScript）を設置するための場所です。

すべての `script` 要素内で定義されたすべての関数は、現在のドキュメント全体でグローバルスコープを持っています。

利用可能な場所
-------

|  |  |
| --- | --- |
| カテゴリー | 無し |
| 許可されている内容 | あらゆる要素や文字データ |

例
-

次のコードスニペットは、SVG の `script` タグの使用方法を示します。このコードでは、SVG `<circle>` 要素の半径を変更するために JavaScript を使用します。


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
 // <![CDATA[
 function change(evt) {
 var target = evt.target;
 var radius = target.getAttribute("r");

 if (radius == 15) {
 radius = 45;
 } else {
 radius = 15;
 }

 target.setAttribute("r", radius);
 }
 // ]]>
 </script>

  <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" />
</svg>
```


結果:

属性
--

### グローバル属性

* コア属性 »
* Xlink 属性 »
* `externalResourcesRequired`
### 専用属性

* `type (en-US)`
* `xlink:href (en-US)`
DOM インターフェイス
------------

この要素は `SVGScriptElement` インターフェイスを実装します。

仕様
--

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

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

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

関連情報
----

* HTML の `script` 要素
<foreignObject>
===============

**`<foreignObject>`** SVG 要素は、異なるユーザーエージェントによって描画されるグラフィックコンテンツを持つ外部 XML 名前空間を含めることを可能にします。含まれた外部グラフィックコンテンツは、SVG 変換や合成の対象となります。

The contents of `foreignObject` are assumed to be from a different namespace. Any SVG elements within a `foreignObject` will not be drawn, except in the situation where a properly defined SVG subdocument with a proper `xmlns` attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).

Usually, a `foreignObject` will be used in conjunction with the `<switch>` element and the `requiredExtensions` attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.

利用可能な場所
-------

|  |  |
| --- | --- |
| カテゴリー | 無し |
| 許可されている内容 | あらゆる要素や文字データ |

例
-


```xml
<svg width="400px" height="300px" viewBox="0 0 400 300"
 xmlns="http://www.w3.org/2000/svg">
  <desc>This example uses the 'switch' element to provide a
        fallback graphical representation of a paragraph, if
        XHTML is not supported.</desc>

  <!-- The 'switch' element will process the first child element
 whose testing attributes evaluate to true.-->
  <switch>

    <!-- Process the embedded XHTML if the requiredExtensions attribute
 evaluates to true (i.e., the user agent supports XHTML
 embedded within SVG). -->
    <foreignObject width="100" height="50"
 requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML content goes here -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
      </body>
    </foreignObject>

    <!-- Else, process the following alternate SVG.
 Note that there are no testing attributes on the 'text' element.
 If no testing attributes are provided, it is as if there
 were testing attributes and they evaluated to true.-->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Here is a paragraph that</tspan>
      <tspan x="10" y="20">requires word wrap.</tspan>
    </text>
  </switch>
</svg>
```

属性
--

### グローバル属性

* 条件処理属性
* コア属性
* グラフィカルイベント属性
* プレゼンテーション属性
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### 専用属性

* `x`
* `y`
* `width (en-US)`
* `height (en-US)`
DOM インターフェイス
------------

この要素は `SVGForeignObjectElement` (en-US) インターフェイスを実装します。

仕様
--

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

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

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

SVG の **`<animateMotion>`** 要素は、ある要素がモーションパスに沿って移動する方法を定義します。

**メモ:** 既存のパスを再利用するには、 `<animateMotion>` 要素内の `<mpath>` 要素を `path (en-US)` 属性の代わりに使用する必要があります。
```

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
```



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="lightgrey"
 d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
 dur="10s"
 repeatCount="indefinite"
 path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>
```

使用場面
----

|  |  |
| --- | --- |
| カテゴリー | アニメーション要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。説明的要素`<mpath>` |

属性
--

`keyPoints (en-US)`

 この属性は [0,1] の範囲で、それぞれの `keyTimes (en-US)` に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。
 *値の型*: **<number>**\*; *Default value*: none; *Animatable*: **no**

`path (en-US)`

 この属性は、 `d` 属性と同じ構文を使用して、モーションパスを定義します。
 *値の型*: **<string>**; *Default value*: none; *Animatable*: **no**

`rotate (en-US)`

 この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。
 *値の型*: **<number>**|`auto`|`auto-reverse`; *Default value*: `0`; *Animatable*: **no**



**メモ:** `<animateMotion>` においては、 `calcMode (en-US)` 属性の既定値は `paced` です。

### アニメーション属性

アニメーションタイミング属性
`begin (en-US)`, `dur (en-US)`, `end`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount (en-US)`, `repeatDur (en-US)`, `fill`
アニメーション値属性
`calcMode (en-US)`, `values (en-US)`, `keyTimes (en-US)`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`
他のアニメーション属性

特に重要なもの: `attributeName (en-US)`, `additive (en-US)`, `accumulate (en-US)`

アニメーションイベント属性

特に重要なもの: `onbegin`, `onend`, `onrepeat`

### グローバル属性

コア属性

特に重要なもの: `id`

スタイル付け属性
`class (en-US)`, `style (en-US)`
イベント属性

グローバルイベント属性, 文書要素イベント属性

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

この要素は `SVGAnimateMotionElement` (en-US) インターフェイスを実装しています。

仕様書
---

| Specification |
| --- |
| SVG Animations Level 2 # AnimateMotionElement |

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

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

関連情報
----

* `<mpath>`