recursal/MDN huggingface dataset:
<input type="reset">
====================

`<input>` 要素の **`reset`** 型はボタンとして表示され、既定の `click` イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。

試してみましょう
--------

**メモ:** 通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります（送信ボタンをクリックしようとしているときにクリックしてしまうことが多いです）。

値
-

`<input type="reset">` 要素の `value` 属性は、ボタンのラベルとして表示される文字列を示します。 `reset` などのボタンは他の値を持ちません。

### value 属性の設定


```html
<input type="reset" value="フォームをリセット" />
```


`value` を指定しなかった場合は、既定のラベルが付いたボタンが表示されます（通常は「リセット」ですが、ユーザーエージェントによって異なります）。


```html
<input type="reset" />
```

リセットボタンの使用
----------

`<input type="reset">` ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 `<input type="button">` またはよりよい `<button>` 要素を使用してください。

### 単純なリセットボタン

単純なリセットボタンを作成するところから始めましょう。


```html
<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" />
  </div>
</form>
```


次のように表示されます。

テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。

### リセットのショートカットキーの追加

リセットボタンにショートカットキーを追加するには — あらゆる `<input>` で通用する方法としてと — グローバル属性の `accesskey` を使用します。

この例では、 `r` がアクセスキーとして指定されます (`r` はブラウザーや OS の組み合わせによる特定の修飾キーを押しながら押す必要があります `accesskey` に有益なリストがあります)。


```html
<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" accesskey="r" />
  </div>
</form>
```


上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど）。ボタンにツールチップを追加する（`title` 属性を使う）ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。

### リセットボタンの無効化と有効化

リセットボタンを無効化するには、以下のようにグローバル属性の `disabled` を指定するだけです。


```html
<input type="reset" value="Disabled" disabled />
```


実行時に `disabled` を `true` または `false` に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは `btn.disabled = true` や `btn.disabled = false` のようになります。

**メモ:** ボタンの有効化や無効化についてのより詳しい情報は、 `<input type="button">` のページを参照してください。

検証
--

ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。

例
-

上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | ボタンのラベルとして使用する文字列 |
| **イベント** | `click` |
| **対応している共通属性** | `type` および
 `value` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | なし |
| **暗黙の ARIA ロール** | `button` |

仕様書
---

| Specification |
| --- |
| HTML Standard # reset-button-state-(type=reset) |

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

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

関連情報
----

* `<input>` およびそれが実装している `HTMLInputElement` インターフェイス
* フォームとボタン
* HTML フォーム
* `<button>` 要素
* CSS プロパティの互換性
theme-color
===========

**`theme-color`** の値は `<meta>` 要素の `name` 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 `content` 属性には有効な CSS の `<color>` が含まれていなければなりません。

例
-


```html
<meta name="theme-color" content="#4285f4" />
```


次の画像は、上記の `<meta>` 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。

![theme-color を使用した影響を表す図](/ja/docs/Web/HTML/Element/meta/name/theme-color/theme-color.png)
*画像の出典: Icons & Browser Colors より、Google が作成・共有し Creative Commons 4.0 Attribution License に記載された条件に従って使用されています。*

`media` 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。


```html
<meta
 name="theme-color"
 media="(prefers-color-scheme: light)"
 content="white" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # meta-theme-color |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`manifest`** は `<html>` 要素の属性で、ページ読み込みの初期段階でダウンロードされる、アプリケーションキャッシュマニフェストの URL を指定します。

**メモ:** マニフェストベースのキャッシュ機構は非推奨です。代わりにサービスワーカークリプトを使用してください。

マニフェスト属性はページ読み込みの初期段階でのみ効果を発揮するため、通常の DOM インターフェイスで変更しても効果はなく、代わりに `Window.applicationCache` インターフェイスを使用してください。

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

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

関連情報
----

* `Window.applicationCache`
* サービスワーカー API
<script>: type 属性
=================

**`type`** は `<script>` 要素の属性で、その要素で表されるスクリプトの種類（クラシックスクリプト、JavaScript モジュール、インポートマップ、データブロック）を示します。

値
-

この属性の値は、スクリプトが表現するデータの種類を示し、以下のいずれかの値を取ります。

**属性が未設定（既定値）、空文字列、JavaScript の MIME タイプ**

 スクリプトが「クラシックスクリプト」であること、JavaScript コードを保持していることを示します。
 このスクリプトが JavaScript コードを参照している場合、MIME タイプを指定するのではなく、この属性を省略することを推奨します。
 JavaScript の MIME タイプは IANA media types specification に掲載されています。


`module`

 コードを JavaScript モジュールとして扱います。
 スクリプトコンテンツの処理は延期されます。
 `charset` および `defer` 属性の影響を受けません。
 `module` の利用についての情報は、 JavaScript モジュールをご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジンをまたいで読み取る場合、CORS プロトコルを使用する必要があります。


`importmap`

 この値は、要素の本体にインポートマップが格納されていることを示します。
 インポートマップ JSON オブジェクトで、開発者が JavaScript モジュールをインポートする際に、ブラウザーがモジュール指定子を解決する方法を制御するために使用できます。


**その他の値**

 このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。
 開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。
 他の属性は、`src` 属性も含めてすべて無視されます。



**メモ:** 以前のブラウザーでは、この種類は埋め込んだり（`src` 属性によって）インポートしたりするコードのスクリプト言語を識別していました。

仕様書
---

#### No specification found

No specification data found for `html.elements.script.type`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
遅延読み込み
======

**遅延読み込み** (Lazy loading) とは、リソースをノンブロッキング（クリティカルでない）ものとして識別し、必要なときだけこれらを読み込む戦略のことです。クリティカルレンダリングパス (en-US)の長さを短縮する方法であり、ページのロード時間の短縮につながります。

遅延読み込みはアプリケーションのさまざまな場面で発生しますが、一般的にはスクロールやナビゲーションなど、何らかのユーザー操作の際に発生します。

概要
--

 ウェブの進化に伴い、ユーザーに送信される資産の数とサイズが大幅に増加するようになりました。
 2011 年から 2019 年の間に、リソース重量の中央値は、デスクトップでは **~100KB** から **~400KB** に、モバイルでは **~50KB** から **~350KB** に増加しました。一方、画像サイズは、デスクトップで **~250KB** から **~900KB** に、モバイルで **~100KB** から **~850KB** に増加しました。

 この問題に対処するために使用できる方法の 1 つが、クリティカルレンダリングパス (en-US)の長さを短くすることで、最初のレンダリングに重要ではないリソースを遅延読み込みすることです。
 実際の例としては、e コマースサイトのトップページにカートページ/セクションへのリンクがあり、カートページのリソース（JavaScript、CSS、画像など）は、そこに移動する**までは**ダウンロードされないというものがあります。

戦略
--

遅延読み込みは、複数のリソースに、複数の戦略で適用することができます。

### 全般

**コード分割**
 JavaScript、CSS、HTML は小さな塊に分割して送信することができます。これにより、値を提供するために必要な最小限のコードを前もって送信することができ、ページの読み込み時間を改善することができます。残りはオンデマンドで読み込むことができます。

* エントリーポイント分割: アプリ内のエントリーポイントごとにコードを区切ります。
* 動的分割: dynamic import() 文を使用しているコードを区切ります。
### JavaScript

**モジュール型のスクリプト**
`type="module"` を持つスクリプトタグは、既定では JavaScript モジュール として扱われ、先送りされます。

### CSS

既定では、CSS は描画ブロック (en-US)リソースとして扱われ、CSSOM が構築されるまでブラウザーは処理済みのコンテンツを描画しません。CSSは薄く、使用可能な限りすばやく配信する必要があり、レンダリングのブロックを解除するために、メディアタイプや クエリーを使用することが推奨されます。


```html
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
<link href="print.css" rel="stylesheet" media="print" />
```


いくらか CSS の最適化をすることで、これを達成することができます。

### フォント

既定では、フォントリクエストはレンダーツリーが構築されるまで遅延されるため、テキスト描画が遅延することがあります。

既定値を上書きしてウェブのフォントリソースを先読みするために、`<link rel="preload">` や CSS font-display プロパティ、フォント読み込み API を使用することが可能です。

link 要素 も参照してください。

### 画像と iframe

ウェブページには、データ使用量やページの読み込み速度に影響する画像がたくさん格納されていることがとてもよくあります。これらの画像のほとんどは画面外にあり（クリティカルではない (en-US)）、それらを表示するためにはスクロールなど、ユーザーの操作を必要とします。

**loading 属性**
`loading` 属性を `<img>` 要素に（または `loading` 属性を `<iframe>` 要素に）設定することで、ユーザーが近くにスクロールするまで、画面に表示されている画像や iframe の読み込みを延期するように、ブラウザーに指示することができます。


```html
<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
```


`load` イベントは、積極的に読み込まれたコンテンツがすべて読み込まれたときに発行されます。このとき、視覚ビューポートの範囲内にまだ読み込まれていない遅延読み込みされた画像があることは十分に考えられます（というか、あり得ます）。

指定された画像の読み込みが完了したかどうかは、論理型の `complete` プロパティの値を調べることで判断することができます。

**ポリフィル**
 古いブラウザーや現在非互換性のあるブラウザーに対応するために、このポリフィルを記載してください。
 loading-attribute-polyfill

**交差オブザーバー API**
交差オブザーバーは、監視対象要素がブラウザーのビューポートに入ったとき、または出たときに、ユーザーに知らせることができるようにします。

**イベントハンドラー**
 ブラウザーとの互換性が重要な場合、いくつかのオプションがあります。

* 交差オブザーバーのポリフィル
* スクロール、リサイズ、方向転換イベントハンドラーのフォールバックで、特定の要素がビューポート内にあるかどうかを判断します。
仕様書
---

| Specification |
| --- |
| HTML Standard # lazy-loading-attributes |

関連情報
----

* Render blocking CSS
* Optimizing loading and rendering
* Lazy loading images and video
アニメーションのパフォーマンスとフレームレート
=======================

ウェブ上でのアニメーションは、`SVG` (en-US)、`JavaScript`（`<canvas>` や `WebGL` を含む）、CSS の `animation`、`<video>`、アニメーション GIF、さらにアニメーション PNG やその他の種類の画像もあります。CSS プロパティをアニメーションさせることによるパフォーマンスコストは、プロパティによって異なり、高価な CSS プロパティをアニメーションさせると、ブラウザーが滑らかなフレームレートを実現するのに苦労し、ジャンクとなることがあります。

動画やアニメーション GIF などのアニメーションメディアでは、パフォーマンスの主な懸念はファイルサイズです。パフォーマンスに悪影響を与えない程度に速くファイルをダウンロードすることが最大の課題です。CSS、SVG、<canvas>、WebGL、他にも JavaScript アニメーションなど、コードベースのアニメーションは、帯域幅のフットプリントが小さくてもパフォーマンスの問題が発生することがあります。これらのアニメーションは、CPU を消費したり、ジャンクを発生させたりすることがあります。

ユーザーは、すべてのインターフェイスとスムーズにやり取りできること、そしてすべてのユーザーインターフェイスが応答することを期待しています。アニメーションは、サイトをより速く、レスポンスよく感じさせるのに役立ちますが、アニメーションは正しく行われないと、サイトをより遅く、乱雑に感じさせることもあります。レスポンシブユーザーインターフェイスのフレームレートは 60 フレーム/秒 (fps) です。常に 60fps を維持することは不可能ですが、すべてのアニメーションで高いフレームレートと安定したフレームレートを維持することが重要です。

CSS アニメーションでは、いくつかのキーフレームを指定して、それぞれのキーフレームがアニメーションの特定の段階での要素の姿を定義するために、 CSS を使用しています。ブラウザーは、各キーフレームから次のキーフレームへの遷移としてアニメーションを作成します。

JavaScript を使用して要素をアニメーション化するのに比べ、CSS アニメーションは簡単に作成することができます。また、ブラウザーがフレームをレンダリングするタイミングや、必要に応じてフレームを削除することを制御できるので、パフォーマンスも向上します。

しかし、CSS のプロパティを変更した場合のパフォーマンスコストは、プロパティによって異なる場合があります。アニメーションが滑らかに現れるレートは、1 秒間に 60 フレームというのが一般的に受け入れられています。1 秒間に 60 フレームの速度では、ブラウザーはスクリプトの実行、必要に応じてスタイルとレイアウトの再計算、更新される領域の再描画に 16.7 ミリ秒の時間を使用します。遅いスクリプトや 高コストの CSS プロパティのアニメーションは、ブラウザーがスムーズなフレームレートを達成するのに苦労するため、ジャンクとなることがあります。

レンダリングウォーターフォール
---------------

要素が CSS プロパティをアニメーションしているときに、ブラウザーがページに変更を加えるために使用するプロセスは、以下の手順からなるウォーターフォールと記述することができます。

![CSS レンダリングのウォーターフォールのフローチャート。順に、スタイル再計算、レイアウト、ペイントの手順となっている。](/ja/docs/Web/Performance/Animation_performance_and_frame_rate/css-rendering-waterfall.png)

1. **スタイル再計算**: 要素のプロパティが変更された場合、ブラウザーは計算されたスタイルを再計算する必要があります。
2. **レイアウト**: 次に、ブラウザーは計算されたスタイル設定を用いて、要素の位置と形状を決定します。この処理は「レイアウト」と呼ばれていますが、「再フロー」とも呼ばれることがあります。
3. **描画**: 最後に、ブラウザーは要素を画面に再描画する必要があります。ページをレイヤーに分割し、それぞれを個別に描画した後、「コンポジション」と呼ばれる処理で結合することもあります（この手順では示していません）。

この一連の動作は、完了するまで画面が更新されないので、単一のフレームに収まる必要があります。

CSS プロパティのコスト
-------------

レンダリングウォーターフォールの文脈では、一部プロパティは他のプロパティよりもコストが高くなります。

| プロパティの種類 | コスト | 例 |
| --- | --- | --- |
| 要素の *形状* または *位置* に影響を与えるプロパティは、スタイル再計算、レイアウト、再描画を発生させます。 | スタイル再計算あり
レイアウト計算あり
再描画あり | `left``max-width``border-width``margin-left``font-size` |
| 形状や位置に影響しないが、独自のレイヤーで描画されないプロパティは、レイアウト処理が発生しません。 | スタイル再計算あり
レイアウト計算なし
再描画あり | `color` |
| 独自のレイヤーでレンダリングされるプロパティは、更新がコンポジションで処理されるため、再描画が発生することもありません。 | スタイル再計算あり
レイアウト計算なし
再描画なし | `transform``opacity` |

開発者ツール
------

ほとんどのウェブブラウザーには、ページの要素をアニメーションさせるときにブラウザーが行っている作業を把握するためのツールが記載されています。これらのツールを用いて、アプリケーションのアニメーションフレームレートを測定し、パフォーマンスのボトルネックが見つかった場合に、それを診断することができます。

* Chrome パフォーマンスツール
* Firefox パフォーマンスツール
SVG教本
=====

**変倍ベクタ図形** (Scalable Vector Graphics; SVG) は図形をタグ付けする W3C の XML 派生言語です。SVG は，Firefox、Opera、WebKit ブラウザ、Internet Explorer 及び他のブラウザにおいて部分的に実装されています。

本教本は SVG の内部構造の説明を目的としており，また技術的詳細が目白押しです。美しい画像を描きたいだけなら，より有用な資料はInkscape の文書群にて見付かるでしょう。他に，W3C のSVG 入門も，良い SVG 概説を提供しています。

**メモ:** このチュートリアルは執筆の非常に早い段階にあります。もしあなたが可能なら、力を貸し、1 つまたは 2 つのパラグラフを書いて手助けしてください。ページ全体を書いていただければ、なお良いです。

##### ゼロから始める SVG の紹介

* 概要
* 始めましょう
* 配置
* 基本的な図形
* パス
* 塗りつぶしとストローク
* 階調
* 模様
* テキスト
* 基本的なトランスフォーム
* クリッピングとマスキング
* 他の SVG コンテンツ
* フィルタ効果
* SVG フォント
* SVG image 要素
* SVG のツール
* 他のチュートリアル

続く話題はより発展的であり、従って各々自身の教本を習得すべきです。

##### JavaScript による SVG のスクリプティング

未定

##### SVG フィルタのチュートリアル

未定

##### SMIL を用いた SVG のアニメーション

未定

##### SVG によるフォント作成

未定
画像としての SVG
==========

SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。

* HTML の `<img>` または `<svg>` 要素
* CSS の `background-image`
* CSS の `list-style-image`
* CSS の `content`
* SVG の `<image>` 要素
* SVG の `<feImage>` (en-US) 要素
* キャンバスの `drawImage` 関数
### 制限

セキュリティ上の目的で、 Gecko は SVG コンテンツを画像として扱う場合にいくつかの制限を設けています。

* JavaScript は無効になります。
* 外部のリソース（画像やスタイルシートなど）を読み込むことはできませんが、 data: URI を使用してインライン化されていれば可能です。
* `:visited` のリンクスタイルは描画されません。
* プラットフォームネイティブのウィジェットのスタイル付け（OS のテーマに基づくもの）は無効です。

なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または `<iframe>`, `<object>`, `<embed>` の何れかの要素を使用して文書として埋め込まれた場合には適用されません。

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-image |

関連情報
----

* HTML 内の SVG 入門
スクリプティング
========

ブラウザーの既定の動作を `evt.preventDefault( )` メソッドで上書きしたり、イベントリスナーを `element.addEventListener(event, function, useCapture)` という構文でオブジェクトに追加したり、要素のプロパティを `svgElement.style.setProperty("fill-opacity", "0.0", "")` などで設定することが可能です。 3 つの引数がすべてプロパティを設定していることに注意してください。

### イベントコードの既定の挙動を防ぐ

ドラッグ＆ドロップのコードを書いていると、ページのテキストをドラッグ中に誤って付随的に選択してしまうことがあります。もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻るという、ブラウザーの既定の振る舞いを上書きしたくなるでしょう。このようなことは、 `evt.preventDefault()` メソッドで実現することができます。

### オブジェクトに `eventListener` を使う

`addEventListener()` や `removeEventListener()` は、対話的な SVG を書くときとても勇湯王です。これらのメソッドの第二引数として、 `handleEvent` インターフェイスを実装するオブジェクトを渡すことができます。


```js
function myRect(x, y, w, h, message) {
  this.message = message;

  this.rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  this.rect.setAttributeNS(null, "x", x);
  this.rect.setAttributeNS(null, "y", y);
  this.rect.setAttributeNS(null, "width", w);
  this.rect.setAttributeNS(null, "height", h);
  document.documentElement.appendChild(this.rect);

  this.rect.addEventListener("click", this, false);

  this.handleEvent = function (evt) {
    switch (evt.type) {
      case "click":
        alert(this.message);
        break;
    }
  };
}
```

文書間のスクリプティング - 埋め込み SVG の参照
---------------------------

HTML 内で SVG を使用する場合、Adobe の SVG Viewer 3.0 は自動的に `svgDocument` という SVG 文書を指すウィンドウのプロパティを含みます。これは、Mozilla のネイティブ SVG 実装には当てはまりません。したがって、 `window.svgDocument` を使用しても Mozilla ではうまくいきません。その代わりに、


```js
var svgDoc = document.embeds["name\_of\_svg"].getSVGDocument();
```


を使用して埋め込まれた SVG 文書の参照を取得することができます。

SVG 文書を表す `Document` にアクセスするには、以下のように `HTMLIFrameElement.contentDocument` （文書が `<iframe>` で表現されている場合）または `HTMLObjectElement.contentDocument` （文書が `<object>` 要素で表現されている場合）に注目するとよいでしょう。


```js
var svgDoc = document.getElementById("iframe\_element").contentDocument;
```


さらに、`<iframe>`, `<embed>`, `<object>` の各要素は `getSVGDocument()` というメソッドを提供しており、要素の埋め込み SVG を表す `XMLDocument` または要素が SVG 文書を表さない場合には `null` を返します。

また、 `document.getElementById("svg_elem_name").getSVGDocument()` を用いても同じ結果を得ることができます。

**メモ:** `SVGDocument` インターフェイスに言及しているドキュメントを見かけることがあります。 SVG 2 より前は、 SVG 文書はこのインターフェイスを使って表現されていました。しかし、現在では SVG 文書は代わりに `XMLDocument` インターフェイスを用いて表現されています。

### 文書をまたがるスクリプティング - JavaScript 関数の呼び出し

HTML 文書に埋め込まれた SVG ファイルから HTML ファイルの中にある JavaScript 関数を呼び出すとき、その関数を参照するには `parent.functionname()` を使うべきです。Adobe SVG Viewer プラグインは `functionname()` の利用を許可していますが、このようなことを行うには適していません。

**メモ:** SVG wiki によると、 JavaScript の変数 `"parent"` は Adobe の SVG バージョン 6 プレビュープラグインでは壊れているとのことです。回避策として、`"parent"`の代わりに`"top"`を使用することが提案されています。このプラグインはベータ版なので、おそらく無視しても大丈夫でしょう。

更なる情報といくつかの例は SVG wiki inter-document scripting page で見つかります。

### `setProperty` には 3 つの引数がある

`svgElement.style.setProperty("fill-opacity", "0.0")` と関数を呼び出すと、 Mozilla では DOMException が `SYNTAX ERR` で発生します。この挙動は W3C によって DOM Level 2 Style 仕様の中で定められています。 `setProperty` 関数は 3 つの引数を持つ関数として定義されています。上記のものは、 `'svgElement.style.setProperty("fill-opacity", "0.0", "")'` で置き換えることができ、これが標準に準拠しています。

### リンク

SVG wiki on Scripting and Programming
defs
====

SVG では、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎり`defs`要素内で定義されることが推奨されています。`defs`要素内でこれらの要素を定義することは、SVG の要素の可読性を向上させ、ひいては操作性をも向上させます。`defs`要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、`<use>`要素を使用します。

利用コンテキスト
--------

|  |  |
| --- | --- |
| カテゴリー | コンテナー要素、構造的要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素`<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) |

例
-


```xml
<svg width="80px" height="30px" viewBox="0 0 80 30"
 xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
 fill="url(#Gradient01)" />
</svg>
```

属性
--

### グローバル属性

* 条件的処理属性（コンディショナルプロセッシング属性） »
* コア属性 »
* 描画イベント属性 »
* プレゼンテーション属性 »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### スペシフィック属性

*スペシフィック属性はありません。*

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

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

仕様
--

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

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

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

概要
--

`<animateMotion>`要素の mpath サブ要素は、外部の `<path>`要素をモーションパスの定義として参照する機能を提供します。

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

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

例
-


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 500 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect
 x="1"
 y="1"
 width="498"
 height="298"
 fill="none"
 stroke="blue"
 stroke-width="2" />

  <!-- Draw the outline of the motion path in blue, along
 with three small circles at the start, middle and end. -->
  <path
 id="path1"
 d="M100,250 C 100,50 400,50 400,250"
 fill="none"
 stroke="blue"
 stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />

  <!-- Here is a triangle which will be moved about the motion path.
 It is defined with an upright orientation with the base of
 the triangle centered horizontally just above the origin. -->
  <path
 d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
 fill="yellow"
 stroke="red"
 stroke-width="7.06">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1" />
    </animateMotion>
  </path>
</svg>
```


出力結果:

属性
--

### グローバル属性

* Core attributes »
* Xlink attributes »
* `externalResourcesRequired`
### 専用属性

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

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

仕様
--

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

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

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

関連情報
----

* `<animateMotion>`
<image>
=======

The **`<image>`** は SVG の要素で、 SVG 文書内に画像を含めます。これはラスター画像ファイルや他の SVG ファイルを表示することができます。

SVG ソフトウェアが対応する必要がある画像形式は JPEG, PNG, および他の SVG ファイルです。アニメーション GIF の動作は未定義です。

`<image>` で表示される SVG ファイルは画像として扱われます。外部リソースは読み込まれず、 `:visited` のスタイルは適用されず、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 `<use>` を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 `<object>` を `<foreignObject>` の中で使用してください。

**メモ:** HTML 仕様書は、解釈時に `<image>` を `<img>` の別名として定義しています。この仕様書の要素とその動作は SVG 文書またはインライン SVG 内のみのものです。

使用場所
----

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

属性
--

### グローバル属性

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

* `x`: 原点から見た画像の水平位置です。
* `y`: 原点から見た画像の垂直位置です。
* `width (en-US)`: 画像が描画される幅です。 HTML の `<img>` とは異なり、この属性は必須です。
* `height (en-US)`: 画像が描画される高さです。 HTML の `<img>` とは異なり、この属性は必須です。
* `href (en-US)` および `xlink:href (en-US)`: 画像ファイルの URL を指します。
* `preserveAspectRatio (en-US)`: 画像の拡大縮小方法を制御します。
DOM インターフェイス
------------

`<image>` は `SVGImageElement` (en-US) インターフェイスを実装しています。

例
-

SVG 内における PNG 画像の基本的な描画:

### SVG


```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn\_logo\_only\_color.png" height="200" width="200" />
</svg>
```

### 結果

仕様書
---

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

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

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

SVG の **`<feDropShadow>`** フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは `<filter>` (en-US) 要素の中でのみ使用できます。

**メモ:** ドロップシャドウの色や不透明度は、 `flood-color (en-US)` や `flood-opacity (en-US)` の各プレゼンテーション属性を使用することで変更できます。
```

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



```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
    </filter>
    <filter id="shadow3">
      <feDropShadow
 dx="-0.8"
 dy="-0.8"
 stdDeviation="0"
 flood-color="pink"
 flood-opacity="0.5" />
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />

  <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);" />

  <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
</svg>
```

属性
--

`dx`

 この属性は、ドロップシャドウの X 方向のオフセットを定義します。
 *値の型*: **<number>**; *既定値*: `2`; *Animatable*: **yes**

`dy (en-US)`

 この属性は、ドロップシャドウの Y 方向のオフセットを定義します。
 *値の型*: **<number>**; *既定値*: `2`; *Animatable*: **yes**

`stdDeviation (en-US)`

 この属性は、ドロップシャドウのぼかし操作の標準偏差を定義します。
 *値の型*: **<number>**; *既定値*: `2`; *Animatable*: **yes**

### グローバル属性

コア属性

特に: `id`

スタイル属性
`class (en-US)`, `style (en-US)`
フィルタープリミティブ属性
`height (en-US)`, `in (en-US)`, `result (en-US)`, `x`, `y`, `width (en-US)`
プレゼンテーション属性

特に: `flood-color (en-US)`, `flood-opacity (en-US)`

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

|  |  |
| --- | --- |
| カテゴリー | フィルター構成要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。`<animate>`、`<script>`、`<set>` |

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # feDropShadowElement |

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

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

概要
--

`polyline`要素は SVG の基本図形であり、いくつかの座標で繋がった一連の直線を生成します。一般的に`polyline` 要素は開いた図形を生成する際に使用します。

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

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

例
-

» polyline.svg

属性
--

### グローバル属性

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

* `points`
DOM インターフェイス
------------

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

仕様
--

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

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

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

関連情報
----

* `<line>`
* `<polygon>`