recursal/MDN huggingface dataset:
クリッピングとマスキング
============

* « 前のページ
* 次のページ »

苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが SVG で半円を作成しようとすると、以下のプロパティを使うことにすぐ気がつくでしょう。

**クリッピング**はある要素のうち、他の場所で定義された一部分を取り除くことを指します。この場合は半透明効果をかけることはできず、完全に表示するか全く表示しないかの扱いになります。

**マスキング**は半透明効果やマスクの濃淡値を考慮することで、ソフトエッジ効果をかけることができます。

クリップの作成
-------

`circle` 要素をもとにして、先に述べた半円を作成しましょう:


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
```


(100,100) を中心にした半径 100 の円を描画します。`clip-path` 属性は、`rect` 要素を 1 つ含む ``<clipPath>`` 要素を参照しています。この長方形は、キャンバスの上半分に黒色で描画されるものです。なお補足として、`clipPath` 要素はたいてい `defs` セクションに置かれます。

ところが、`rect` 要素は描画されません。描画されない代わりにそのピクセルデータは、円の中で最終的にレンダリングするピクセルを決定することに用いられます。長方形は円の上半分だけを覆っているため、円の下半分は消滅します。

これで、path 要素の円弧を扱う必要なしに半円を作りました。クリッピング用に `clipPath` の内部にあるすべてのパスが、そのストロークやトランスフォームと併せて調査および評価されます。そして適用先のオブジェクトのうち、`clipPath` の内容物で決められた透過領域にかかる部分は描画されません。色や不透明度などは、図形の一部を完全に消滅させない限り効果がありません。

マスキング
-----

マスキングの効果は、グラデーションと共に適用するともっとも印象的です。要素をフェードアウトしたい場合は、マスクを用いることですぐにその効果を得ることができます。


```html
<svg
 width="200"
 height="200"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
```


下層のレイヤーに緑色で塗りつぶした `rect` 、上層に赤色で塗りつぶした `rect` があります。また後者には、`mask` 要素を指し示す `mask` 属性があります。mask 要素の内容物は `rect` 要素が 1 つあり、これは透明から白色へのグラデーションで塗りつぶしています。この結果、赤色の長方形のピクセルは mask の内容物のアルファ値 (透明度) を継承して、最終的に緑色から赤色へのグラデーションができます:

`opacity` による透明度
----------------

要素全体の透明度を設定することができます。それには `opacity` 属性を用います:


```xml
<rect x="0" y="0" width="100" height="100" opacity=".5" />
```


上記の長方形は、半透明で描画します。fill および stroke について分けられた 2 つの属性 `fill-opacity` と `stroke-opacity` があり、それぞれのプロパティの不透明度を分けて制御します。なお、ストロークは塗りつぶしの上層に描画することに注意してください。このために塗りつぶしもある要素でストロークの不透明度を設定した場合は、ストロークの半分で塗りつぶしが透けて見え、また同時に残り半分で背景が透けて見えます:


```html
<svg
 width="200"
 height="200"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle
 cx="100"
 cy="100"
 r="50"
 stroke="yellow"
 stroke-width="40"
 stroke-opacity=".5"
 fill="red" />
</svg>
```


この例では、青い背景の上に赤い円があります。黄色のストロークに 50% の不透明度を設定しており、事実上 2 色のストロークになります。

周知の CSS 技術の利用
-------------

Web 開発者が持つツールの中でもっとも強力なもののひとつが、`display: none` です。それゆえ、CSS2 で定義された `visibility` や `clip` と併せて、この CSS プロパティも SVG に取り込むことが決定した点に若干の驚きがあります。過去に設定した `display: none` を元に戻すためには、すべての SVG 要素の初期値が `inline` であると知っておくことが重要です。

* « 前のページ
* 次のページ »
Other content in SVG
====================

* « 前のページ
* 次のページ »

長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。

### ラスター画像の埋め込み

HTML における img 要素と同様に、SVG には同じ用途の `image` 要素があります。これを用いて、任意のラスター (およびベクター) 画像を埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。

埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることができます。


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200"
 height="200">
  <image
 x="90"
 y="-65"
 width="128"
 height="146"
 transform="rotate(45)"
 xlink:href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn\_logo\_only\_color.png" />
</svg>
```

### 任意の XML の埋め込み

SVG は XML アプリケーションであることから、*常に* SVG 文書内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアーでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に ``<foreignObject>`` 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナーおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する `width` および `height` です) のキャリアーになることです。

`foreignObject` 要素は、SVG に XHTML を埋め込むのによい手段です。長いテキストがある場合、SVG の `text` 要素より HTML のレイアウトの方がより適切かつ使いやすくなります。他によく挙げられる使い方として、MathML の式の埋め込みがあります。これは SVG を科学分野で応用する場合に、SVG と MathML を統合するためにとてもよい方法です。

**メモ:** `foreignObject` の内容物は、ビューアーによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。

`foreignObject` は SVG の要素ですので、`image` と同様に SVG のあらゆる技術を用いることができ、その内容物に適用されます。

* « 前のページ
* 次のページ »
SVG のツール
========

* « 前のページ

SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。

### ブラウザーの対応

Internet Explorer 9 により、 IE 9、Mozilla Firefox、Safari、Google Chrome、 Opera といったすべての主要なブラウザーが SVG に対応しています。 WebKit ベースのブラウザーをもつモバイル端末も SVG に対応しています。 古い端末やより小さな端末では、SVG Tiny に対応しているかもしれません。

Inkscape
--------

URL: www.inkscape.org

グラフィック形式について最も重要なツールの一つが、適切な描画プログラムです。 Inkscape は最先端のベクタ描画機能を提供し、またオープンソースです。

さらに、このソフトは SVG をネイティブフォーマットとしています。 Inkscape 固有のデータを保存するときは、カスタムネームスペースによる要素や属性で SVG ファイルを拡張しますが、通常の SVG としてエクスポートすることも選択できます。

Adobe Illustrator
-----------------

URL: www.adobe.com/products/illustrator/ (日本語サイト)

Adobe は Macromedia を買収するまで、もっとも有名な SVG の推進者でした。このときから、 Illustrator は SVG を良好に対応し始めました。しかし、出力された SVG にはしばしば癖がみられ、一般に適用するための後処理が必要になります。

Apache Batik
------------

URL: xmlgraphics.apache.org/batik/

Batik は Apache Software Foundation 傘下の、オープンソースツールのセットです。このツールキットは Java で記述され、ほぼ完全な SVG 1.1 の対応を提供します。また、本来は SVG 1.2 で計画されている機能のいくつかにも対応しています。

Batik はビューアー (Squiggle) や PNG 出力のラスタライザーの他に、SVG ファイルを整形するためのプリティプリンターや TrueType フォントから SVG フォントへのコンバーターも提供します。

Batik は Apache FOP と連携して、SVG を PDF に変換することもできます。

### 他のレンダラー

SVG からラスター画像を作成するためのプロジェクトがいくつかあります。ImageMagick は、もっとも有名なコマンドライン画像処理ツールのひとつです。Gnome ライブラリの rsvg は、 Wikipedia が SVG をラスター化するために用いています。また、 SlimerJS や PhantomJS などのヘッドレスブラウザーを使用すると、ブラウザー上での SVG の表示に近い画像が得られるため、人気があります。

Raphael JS
----------

URL: raphaeljs.com

これは、ブラウザー実装の抽象レイヤーとして働く JavaScript ライブラリです。特に古いバージョンの Internet Explorer は Vector Markup Language (VML) の生成により対応されています。なお VML は 2 つある SVG の前身のひとつであり、 IE 5.5 から使用できます。

Snap.svg
--------

URL: snapsvg.io

Raphael JS の作者が開発した、より新しい JavaScript の抽象化レイヤーです。 Snap.svg は最近のブラウザー向けに設計されているため、マスキング、クリッピング、パターン、フルグラデーション、グループなどの最新の SVG 機能をサポートしています。 Raphael のような古いブラウザーには対応していません。

Google Docs
-----------

URL: www.google.com/google-d-s/drawings/

Google Docs の図形描画機能は、SVG でエクスポートすることができます。

科学
--

よく知られているプロッティングツールである xfig や gnuplot は、SVG でのエクスポートを対応しています。ウェブでグラフを描画するための JSXGraph は VML、SVG、および canvas を対応し、どの技術を用いるかはブラウザーの能力に応じて自動的に決定します。

GIS (Geographic Information System) アプリケーションで、SVG は保存および描画の形式としてよく用いられます。詳しくは carto.net をご覧ください。

他のツール
-----

W3C は、SVG を対応するプログラムの一覧を提供しています。

* « 前のページ
配置
==

* « 前のページ
* 次のページ »

この記事では、 Scalable Vector Graphics (SVG) がどのようにオブジェクトの位置や大きさを表現しているのか、座標系や、スケーラブルなコンテキストにおける「ピクセル」の測定値の意味などを紹介します。

グリッド
----

![](/ja/docs/Web/SVG/Tutorial/Positions/canvas_default_grid.png)SVG はすべての要素に対して座標系または**グリッド**システムを使用しており、これは canvas (またはその他多くのコンピュータ描画ルーチン) で使用されているものと同様です。すなわち、文書の左上隅を点 (0,0)、すなわち原点と見なします。位置は、左上からのピクセル単位で測定され、正の x 方向は右に、正の y 方向は下になります。これは、子どもの頃に教わったグラフの描き方 (Y 軸が反転している) とは少し違うことに注意してください。しかし、これは HTML の要素の配置方法と同じです (既定では、左書きの文書では同様に考えられますが、右書きの文書は X を右から左に配置します)。

#### 例

次の要素、
```

<rect x="0" y="0" width="100" height="100" />
```


は、左上の角を起点に、そこから右と下に 100px の範囲で四角形を定義します。

### 「ピクセル」とは

最も基本的な場合においては、 SVG 文書の 1 ピクセルは出力デバイス (例えば画面) の 1 画素に対応します。しかし、この動作を変えることができないのであれば、 SVG の名称に "Scalable" が付いていなかったでしょう。 CSS のフォントサイズに絶対値と相対値があるように、 SVG でも絶対単位 ("pt" や "cm" など寸法の識別子) と、そのような識別子を持たない数値だけの、いわゆるユーザー単位があります。

特に指定しない限り、 1 ユーザー単位は 1 画面単位と同じです。明示的にこの動作を変えるための手段が SVG にあります。以下の `svg` ルート要素から始める場合:
```

<svg width="100" height="100">
```


上記の要素は、 100x100px のシンプルな SVG キャンバスを定義します。1 ユーザー単位は 1 画面単位と同じです。
```

<svg width="200" height="200" viewBox="0 0 100 100">
```


この場合、 SVG キャンバス全体の大きさは 200px×200px です。しかし `viewBox` 属性は、表示するキャンバスの部分を定義しています。これら 200x200 ピクセルの領域は、ユーザー単位 (0,0) から始まり右方向および下方向に 100x100 ユーザー単位を占める領域を表示します。これは実質的に 100x100 単位の領域をズームインし、画像を 2 倍のサイズに引き伸ばします。

現行の (単一の要素またはイメージ全体への) ユーザー単位と画面単位間のマッピングは、**ユーザー座標系** (user coordinate system) と呼ばれます。座標系から離れることで、回転・変形・反転を行うこともできます。既定のユーザー座標系は、1 ユーザーピクセルを 1 デバイスピクセルに割り当てます。(ただし、デバイスは何を 1 ピクセルとして扱うかを決めることができるかもしれません。) SVG ファイルで "in" や "cm"など 特定の寸法である長さは、結果の画像で 1:1 で見えるようにする方法で計算されます。

これを説明する SVG 1.1 の仕様を引用します。

> 
> (前略) ユーザーエージェントは自身の環境から、"1px" を "0.2822222mm" に対応づける (すなわち 90dpi) と仮定します。すると、SVG コンテンツの処理において (中略) "1cm" は "35.43307px" (よって、35.43307 ユーザー単位) と一致します。
> 
> 
> 

* « 前のページ
* 次のページ »
基本的な座標変換
========

* « 前のページ
* 次のページ »

これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、 `<g>` 要素を正式に紹介しましょう。このヘルパーを用いると、要素の集合全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。

例
-


```html
<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>
```


以下の座標変換はすべて、要素の `transform` 属性をまとめたものです。座標変換はホワイトスペース文字区切りで連結することで、連鎖させることができます。

移動
--

属性で属性の位置を決めることができますが、移動させなければならないことがあります。そのために、`translate()` 変換が用意されています。


```html
<svg width="40" height="50" style="background-color:#bff;">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>
```


この例では長方形を描画しますが、描画位置を (0, 0) ではなく (30, 40) に移します。

2 番目の値が与えられない場合は、*0* であるとみなします。

回転
--

要素を回転させることは、よく行われる処理です。これには `rotate()` 座標変換を用います。


```html
<svg width="31" height="31">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>
```


この例では、45 度回転した正方形を表示します。 `rotate()` の値は度単位で指定します。

複数の座標変換
-------

座標変換は、空白で区切るだけで簡単に連結することができます。例えば、 `translate()` と `rotate()` はよく使用される座標変換です。


```html
<svg width="40" height="50" style="background-color:#bff;">
  <rect
 x="0"
 y="0"
 width="10"
 height="10"
 transform="translate(30,40) rotate(45)" />
</svg>
```


この例では、前の例と同じく小さな正方形を表示していますが、同時に 45 度回転させています。

傾斜
--

矩形からひし形を作るために、 `skewX()` と `skewY()` の変換が利用できます。それぞれ、要素をどの程度傾けるかを決める角度を受け取ります。

拡大縮小
----

`scale()` は、要素のサイズを変更します。これは 2 つの数値を受け取って、拡大または縮小の比率として用います。*0.5 は 50% への縮小を表します。2 番目の数値を省略した場合は、1 番目の値と同じであるとみなします。*

`matrix()` を用いた複雑な座標変換
----------------------

以上の座標変換はすべて、 2x3 の変換行列で表現することができます。複数の変換を組み合わせるには、結果として得られる行列を `matrix(a, b, c, d, e, f)` 変換で直接設定します。この変換は、以前の座標系から新しい座標系への座標の割り当てを，次のようにして行います。



{

x

newCoordSys

=
a

x

prevCoordSys

+
c

y

prevCoordSys

+
e


y

newCoordSys

=
b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

\left{ \begin{matrix} x\_{\mathrm{prevCoordSys}} = a x\_{\mathrm{newCoordSys}} + c y\_{\mathrm{newCoordSys}} + e \ y\_{\mathrm{prevCoordSys}} = b x\_{\mathrm{newCoordSys}} + d y\_{\mathrm{newCoordSys}} + f \end{matrix} \right.


SVG の transform のドキュメントにおける具体例を参照してください。このプロパティに関する詳細情報は、SVG 勧告で得ることができます。

座標系に与える効果
---------

座標変換を用いるときは、座標変換を適用した要素内で新たな座標系が確立します。つまり、その要素や子要素に指定する単位が 1:1 のピクセル対応づけに従わない可能性があり、またそれは座標変換に伴う変形、移動、拡大縮小にも波及します。


```html
<svg width="100" height="100">
  <g transform="scale(2)">
    <rect width="50" height="50" />
  </g>
</svg>
```


上記の例で、長方形のサイズは 100x100 ピクセルになります。`userSpaceOnUse` のような属性に依存している場合などに、より興味深い効果が発生します。

SVG 内への SVG 埋め込み
----------------

HTML とは対照的に、SVG では他の `svg` 要素をシームレスに埋め込むことができます。この方法を用い、内部の `svg` 要素で `viewBox`、`width`、`height` 属性を活用して新たな座標系を作成することもできます。


```html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>
```


上記の例は、基本的にはもうひとつ上の例と同じ効果をもたらすもので、すなわち長方形のサイズは rect 要素で指定したサイズの 2 倍になります。

* « 前のページ
* 次のページ »
stroke-linejoin
===============

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

`stroke-linejoin` 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。

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

**注意:** `miter` オプションの最終的な見た目は `stroke-miterlimit` 属性の値の影響を受けます。

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

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

例
-


```html
<?xml version="1.0"?>
<svg
 width="120"
 height="300"
 viewBox="0 0 120 300"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <polyline
 stroke-linejoin="miter"
 points="-20,115 60,40 140,115"
 stroke="black"
 stroke-width="40"
 fill="none" />

  <polyline
 stroke-linejoin="round"
 points="-20,200 60,125 140,200"
 stroke="black"
 stroke-width="40"
 fill="none" />

  <polyline
 stroke-linejoin="bevel"
 points="-20,285 60,210 140,285"
 stroke="black"
 stroke-width="40"
 fill="none" />

  <path
 d="M-20,115 L60,40 L140,115 M-20,200 L60,125 L140,200 M-20,285 L60,210 L140,285"
 stroke="white"
 fill="none" />
</svg>
```

要素
--

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

* Shape 要素 »
* Text content 要素 »
関連
--

* stroke-miterlimit
viewBox
=======

« SVG Attribute reference home

`viewBox`属性は、特定の container 要素に合わせるためのグラフィックス stretch のセットを指定できます。

The value of the `viewBox` attribute is a list of four numbers `min-x`, `min-y`, `width` and `height`, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute `preserveAspectRatio (en-US)`.

Negative values for `width` or `height` are not permitted and a value of zero disables rendering of the element.

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

| Categories | None |
| --- | --- |
| Value | *See above* |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

例
-

要素
--

以下の要素が`viewBox`属性を使います。

* `<svg>`
* `<symbol>` (en-US)
* `<marker>` (en-US)
* `<pattern>`
* `<view>` (en-US)
関連情報
----

* SVG Getting Started: Positions
dx
==

« SVG Attribute reference home

`dx` 属性は、要素またはその中身の位置についての、x 軸に沿ったずれを表します。まさしくずらされるものは、この属性が設定される要素によります。

`<feOffset>` (en-US) 要素の場合は、入力グラフィックをずらす量を表す <number> です。この量は、 `<filter>` (en-US) 要素上に `primitiveUnits (en-US)` 属性で確立した座標系で表されます。

`<glyphRef>` (en-US) 要素の場合は, このグリフについてのフォント座標系内での相対的 X 座標を表す <number> です。

`<text>` 要素、 `<tspan>` 要素、 `<tref>` (en-US) 要素、`<altGlyph>` 要素の場合は、<list-of-length> を受け取るせいで、物事が少し複雑になります。

一つの <length> が与えられた場合、この値は、この要素またはその子孫のうちのいずれかの内部における最初の文字についての現在テキスト位置の新たな相対的 X 座標です。 現在テキスト位置は 、最初の文字が描画される前に、現在のユーザ座標系の x 軸に沿って、 <length> だけずらされます。

カンマまたはスペースで区切られた n 個の <length> のリストが与えられた場合、これらの値は、この要素またはその子孫のうちのいずれかの内部における最初の n 文字についての現在テキスト位置の、x 軸に沿ったインクリメンタルなずれを表します。よって、現在の `<text>` 要素内部の文字を描いた結果として得られる現在テキスト位置が、現在のユーザ座標系の X 軸に沿って、 <length> だけずらされます。

<length> よりも多数の文字が存在する場合は、これらの余分な文字の各々について、以下のようにします。

* 先祖の `<text>` 要素または `<tspan>` 要素が、その与えられた文字について、 `dx` 属性を通じて相対 X 座標を指定している場合には、その量の分だけ、現在のユーザ座標系の x 軸に沿って、現在テキスト位置がずらされます (もっとも近い先祖が優先されます)。
* それ以外の場合は、x 軸に沿った更なるずれは起こりません。
Usage context
-------------

| Categories | None |
| --- | --- |
| Value | <number> | <list-of-length> |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition): altGlyph element SVG 1.1 (2nd Edition): feOffset element SVG 1.1 (2nd Edition): glyphRef element SVG 1.1 (2nd Edition): text element SVG 1.1 (2nd Edition): tspan element |

Elements
--------

以下の要素が `dx` 属性を使えます。

* `<altGlyph>`
* `<feOffset>` (en-US)
* `<glyphRef>` (en-US)
* `<text>`
* `<tref>` (en-US)
* `<tspan>`
x1
==

**`x1`** 属性は、二つ以上の座標を必要とする SVG 要素を描画するための一つ目の x 座標を指定するのに使います。一つしか座標を必要としない要素は、これの代わりに `x` 属性を使います。

二つの要素がこの属性を使っています。つまり、`<line>` と `<linearGradient>` です。
```

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



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="5" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg>
```

line
----

`<line>` に関しては、`x1` は、その直線の開始点の x 座標を定めます。

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

### 例
```

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



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="5" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg>
```

linearGradient
--------------

`<linearGradient>` に関しては、`x1` は、グラデーションのストップ値をマッピングするのに使われる*グラデーション・ベクトル* (*gradient vector)* の開始点の x 座標を定めます。この属性の正確な振る舞いは、`gradientUnits (en-US)` 属性の影響を受けます。

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

### 例
```

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 デフォルトでは、グラデーション・ベクトルは、適用先の形状を囲う境界の
 左端から始まります。
 -->
  <linearGradient x1="0%" id="g0">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

  <rect x="1" y="1" width="8" height="8" fill="url(#g0)" />

  <!--
 ここでは、グラデーション・ベクトルは、適用先の形状を囲う境界の
 左端から 80% のところから始まります。
 -->
  <linearGradient x1="80%" id="g1">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

  <rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg>
```

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElementX1Attribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementX1Attribute |
onclick
=======

**`onclick`** 属性は、要素がクリックされたときに実行するスクリプトを指定します。

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

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<circle>`
* `<defs>`
* `<desc>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>` (en-US)
* `<metadata>`
* `<mpath>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<radialGradient>`
* `<rect>`
* `<script>`
* `<set>`
* `<stop>`
* `<style>` (en-US)
* `<svg>`
* `<switch>`
* `<symbol>` (en-US)
* `<text>`
* `<textPath>` (en-US)
* `<title>`
* `<tref>` (en-US)
* `<tspan>`
* `<use>`
* `<view>` (en-US)
例
-
```

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



```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle
 cx="100"
 cy="100"
 r="100"
 onclick="alert('You have clicked the circle.')" />
</svg>
```

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

|  |  |
| --- | --- |
| 値 | `<anything>` |
| 既定値 | *なし* |
| アニメーション | 不可 |

仕様書
---

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

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

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

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

**`accent-height`** 属性は原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。

1 つの要素のみがこの属性を使用します: `<font-face>` (en-US)

font-face
---------

`<font-face>` (en-US)に対して、`accent-height`は原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。

|  |  |
| --- | --- |
| 値 | <number> |
| 既定値 | Value of `ascent (en-US)` |
| アニメーション可否 | いいえ |

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementAccentHeightAttribute |

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

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

関連情報
----

* `cap-height (en-US)`
* `x-height (en-US)`
marker-mid
==========

**`marker-mid`** 属性は、指定されたシェイプの中間の頂点すべてに描かれる矢印やマーカーを定義します。

マーカーは、パスデータの最初と最後以外のすべての頂点に描画されます。

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

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

* `<circle>`
* `<ellipse>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
例
-
```

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



```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
      <circle cx="4" cy="4" r="4" stroke="none" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-mid="url(#circle)" />
</svg>
```

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

|  |  |
| --- | --- |
| 値 | `none` | `<marker-ref>` |
| 既定値 | `none` |
| アニメーション | 可 |

`none`

指定された頂点にマーカー記号を描画してはならないことを示します。

`<marker-ref>`

この値は `<marker>` (en-US) 要素への参照で、指定された頂点に描画されるものです。参照が有効でない場合は、マーカーは描画されません。

仕様書
---

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

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

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

関連情報
----

* `<marker>` (en-US)
* `marker-start (en-US)`
* `marker-end (en-US)`
stroke-miterlimit
=================

**`stroke-miterlimit`** 属性はプレゼンテーション属性で、制限長をマイター長とマイター接続に使用する `stroke-width (en-US)` の比率で定義します。制限長を超えると、接続はマイターからベベルへと変更されます。

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

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

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

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



```html
<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <!-- Impact of the default miter limit -->
  <path
 stroke="black"
 fill="none"
 stroke-linejoin="miter"
 id="p1"
 d="M1,9 l7 ,-3 l7 ,3
 m2,0 l3.5 ,-3 l3.5 ,3
 m2,0 l2 ,-3 l2 ,3
 m2,0 l0.75,-3 l0.75,3
 m2,0 l0.5 ,-3 l0.5 ,3" />

  <!-- Impact of the smallest miter limit (1) -->
  <path
 stroke="black"
 fill="none"
 stroke-linejoin="miter"
 stroke-miterlimit="1"
 id="p2"
 d="M1,19 l7 ,-3 l7 ,3
 m2, 0 l3.5 ,-3 l3.5 ,3
 m2, 0 l2 ,-3 l2 ,3
 m2, 0 l0.75,-3 l0.75,3
 m2, 0 l0.5 ,-3 l0.5 ,3" />

  <!-- Impact of a large miter limit (8) -->
  <path
 stroke="black"
 fill="none"
 stroke-linejoin="miter"
 stroke-miterlimit="8"
 id="p3"
 d="M1,29 l7 ,-3 l7 ,3
 m2, 0 l3.5 ,-3 l3.5 ,3
 m2, 0 l2 ,-3 l2 ,3
 m2, 0 l0.75,-3 l0.75,3
 m2, 0 l0.5 ,-3 l0.5 ,3" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <path
 stroke="pink"
 fill="none"
 stroke-width="0.05"
 d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
 M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
 M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</svg>
```


`stroke-linejoin` で `miter` 結合が指定されている場合、マイターはパスを描く線の太さを大きく超える可能性があります。 `stroke-miterlimit` の比率は、いつ限界を超えるかを定義するために使用され、超えた場合、結合はマイターからベベルに変換されます。

マイター長（マイターの外側の先端から内側の角までの距離）と `stroke-width (en-US)` の比は、ユーザー空間における直線間の角度 (theta) から直接数式で求められます。


stroke-miterlimit
=

miterLength

stroke-width

=

1

sin

(

θ

2

)



例えば、マイター制限を 1.414 とすると、マイターが 90 度未満の場合にベベルに変換され、 4.0 とすると約 29 度未満、 10.0 とすると約 11.5 度未満の場合にベベルに変換されることになります。

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

|  |  |
| --- | --- |
| 値 | **<number>** |
| 既定値 | 4 |
| アニメーション | 可 |

`stroke-miterlimit` の値は 1 以上でなければなりません。

仕様書
---

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

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

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

**`stroke`** 属性はプレゼンテーション属性で、この図形の輪郭を描画するのに使われる色（*またはグラデーションやパターンなどの SVG ペイントサーバー*）を定義します。

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

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

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

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- 単純な色の輪郭 -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- グラデーションによる円の輪郭 -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>

  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>
```

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

|  |  |
| --- | --- |
| 値 | **<paint>** |
| 既定値 | `なし` |
| アニメーション | 可 |

仕様書
---

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

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

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