フィルター効果 - SVG: スケーラブルベクターグラフィック

フィルター効果
=======

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

基本的な図形では、ある効果を得るために必要な柔軟性が得られない場合があります。よくある例として、ドロップシャドウはグラデーションの組み合わせでは合理的に作成することができません。フィルターは、 SVG が高度な効果を作り出すための仕組みです。

基本的な例としては、 SVG コンテンツにぼかし効果を加えることが挙げられます。基本的なぼかしはグラデーションの助けを借りて実現できますが、それ以上のことを行うにはぼかしフィルターが必要です。

例
-

フィルターは `<filter>` (en-US) 要素で定義され、 SVG ファイルの `<defs>` セクションに置かなければなりません。フィルタータグの間には*プリミティブ*のリストがあり、前の操作（ぼかし、照明効果の追加など）の上に構築される基本的な操作です。作成したフィルターをグラフィック要素に適用するには、 `filter (en-US)` 属性を設定します。

```html
<svg
 width="250"
 viewBox="0 0 200 85"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <defs>
    <!-- Filter declaration -->
    <filter
 id="MyFilter"
 filterUnits="userSpaceOnUse"
 x="0"
 y="0"
 width="200"
 height="120">
      <!-- offsetBlur -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />

      <!-- litPaint -->
      <feSpecularLighting
 in="blur"
 surfaceScale="5"
 specularConstant=".75"
 specularExponent="20"
 lighting-color="#bbbbbb"
 result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000" />
      </feSpecularLighting>
      <feComposite
 in="specOut"
 in2="SourceAlpha"
 operator="in"
 result="specOut" />
      <feComposite
 in="SourceGraphic"
 in2="specOut"
 operator="arithmetic"
 k1="0"
 k2="1"
 k3="1"
 k4="0"
 result="litPaint" />

      <!-- merge offsetBlur + litPaint -->
      <feMerge>
        <feMergeNode in="offsetBlur" />
        <feMergeNode in="litPaint" />
      </feMerge>
    </filter>
  </defs>

  <!-- Graphic elements -->
  <g filter="url(#MyFilter)">
    <path
 fill="none"
 stroke="#D90000"
 stroke-width="10"
 d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
    <path
 fill="#D90000"
 d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
    <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana">
      <text x="52" y="52">SVG</text>
    </g>
  </g>
</svg>
```

### ステップ 1

```html
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
```

`<feGaussianBlur>` (en-US) は `in` "SourceAlpha" を受け取ります。これは元のグラフィックのアルファチャンネルで、 4 のぼかしを適用し，その結果を "blur" という名前の一時的なバッファーに格納します．

### ステップ 2

```html
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
```

`<feOffset>` (en-US) は、先ほど作成した `in` "blur" を取り込み、結果を右に 4、下に 4 シフトして、バッファー "offsetBlur" に格納するものです。最初の 2 つのプリミティブは、ドロップシャドウを作成するだけです。

### ステップ 3

```html
<feSpecularLighting
 in="offsetBlur"
 surfaceScale="5"
 specularConstant=".75"
 specularExponent="20"
 lighting-color="#bbbbbb"
 result="specOut">
  <fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
```

`<feSpecularLighting>` (en-US) は `in` "offsetBlur" を受け取り、照明効果を生成し、バッファー "specOut" に `result` を格納します。

### ステップ 4

```html
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
```

最初の `<feComposite>` (en-US) は、`in` "specOut" と "SourceAlpha" を受け取り、"specOut" の結果が "SourceAlpha" （元のソースグラフィック）より大きくならないようにマスクし、`result` "specOut" を上書きするものです。

### ステップ 5

```html
<feComposite
 in="SourceGraphic"
 in2="specOut"
 operator="arithmetic"
 k1="0"
 k2="1"
 k3="1"
 k4="0"
 result="litPaint" />
```

2 番目の `<feComposite>` (en-US) は `in` "SourceGraphic" と "specOut" を取り込み、 "SourceGraphic" の上に "specOut" の結果を重ね、その `result` を "litPaint" に格納します。

### ステップ 6

```html
<feMerge>
  <feMergeNode in="offsetBlur" />
  <feMergeNode in="litPaint" />
</feMerge>
```

最後に、 `<feMerge>` (en-US) は、ドロップシャドウである "offsetBlur" と、元のソースグラフィックに照明効果を加えた "litPaint" を結合します。

![元のグラフィック](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-0.png)

元のグラフィック

![プリミティブ 1](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-1.png)

プリミティブ 1

![プリミティブ 2](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-2.png)

プリミティブ 2

![プリミティブ 3](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-3.png)

プリミティブ 3

![プリミティブ 4](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-4.png)

プリミティブ 4

![プリミティブ 5](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-5.png)

プリミティブ 5

![プリミティブ 6](/ja/docs/Web/SVG/Tutorial/Filter_effects/filters01-6.png)

プリミティブ 6

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


Texts - SVG: スケーラブルベクターグラフィック

Texts
=====

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

SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。

基礎
--

導入時の例示で見たとおり、`text` 要素を用いて SVG ドキュメントに任意のテキストを入れることができます。

```xml
<text x="10" y="10">Hello World!</text>
```

`x` および `y` 属性で、ビューポートのどこにテキストを表示するかを指定します。`text-anchor` 属性は start、middle、end、inherit の値を持つことができ、`x` および `y` 属性で指定した点からどちらの方向にテキストを流すかを指定できます。

図形の要素と同様に、テキストも `fill` 属性による着色と、`stroke` 属性によるストロークの付加ができます。またどちらもグラデーションやパターンを参照することができ、SVG の単純な色つきテキストを CSS 2.1 に比べて非常に強力にします。

フォントプロパティの設定
------------

テキストにおいて重要なことは、どのフォントで表示するかです。SVG はフォントを選択可能にするための属性のセットを用意しており、その多くは CSS で対応するプロパティに似ています。以下の各プロパティを、属性としてまたは CSS 宣言を通して設定できます: `font-family`, `font-style`, `font-weight`, `font-variant`, `font-stretch`, `font-size`, `font-size-adjust`, `kerning`, `letter-spacing`, `word-spacing` および `text-decoration`

他のテキスト関連要素
----------

### tspan

この要素は、長いテキストの一部分をマークアップするために用います。`text` 要素または他の `tspan` 要素の子要素にしなければなりません。典型的な用途は、文中の単語 1 つを赤色の太字にすることです。

```xml
<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
```

tspan 要素は以下のカスタム属性を持ちます:

**x**
 包含しているテキストの新たな絶対 X 座標を設定します。これはテキストのデフォルトの現在位置を上書きします。またこの属性は数値のリストを含むことができ、その値は一つずつ、tspan 要素内の各文字に適用されます。

**dx**
 テキストの描画開始位置を、既定の現在位置から水平方向に移動させるオフセットの値です。こちらも各文字に適用される値のリストを持つことができ、 従って次第にオフセットは累積していきます。

これらと同様に、垂直方向の移動量を示す **y** 属性や **dy** 属性もあります。

**rotate**
 すべての文字を指定した角度分回します。数値のリストを指定すると、それぞれの文字が指定した値の分だけ回転し、残った文字は直前の文字に指定された値に従って回転します。

**textLength**
 文字列の長さを意図的に指定する、ややわかりにくい属性です。これは、レンダリングエンジンが判断した文字列の長さとこの属性で指定した値が一致しない場合に、レンダリングエンジンにグリフの位置を微調整させられることを意味します。

#### tref

`tref` 要素ではすでに定義しているテキストを参照でき、効率的にその文字列をコピーします。内容物のテキストを引用する要素を指し示すために `xlink:href` 属性を用いることができます。また引用元とは別に、スタイルの設定や外見の変更を行うことができます。

```xml
<text id="example">This is an example text.</text>

<text>
    <tref xlink:href="#example" />
</text>
```

#### textPath

この要素は `xlink:href` 属性を通して任意のパスを取り出し、そのパスに沿って囲むように文字を並べます。

```xml
<path id="my\_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
  <textPath xlink:href="#my\_path">This text follows a curve.</textPath>
</text>
```

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


クリッピングとマスキング - SVG: スケーラブルベクターグラフィック

クリッピングとマスキング
============

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

苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが 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: スケーラブルベクターグラフィック

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 のツール
========

* « 前のページ

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 を対応するプログラムの一覧を提供しています。

* « 前のページ


配置 - 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 ユーザー単位) と一致します。
>
>
>

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


SVG フォント - SVG: スケーラブルベクターグラフィック

SVG フォント
========

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

SVG が規定された時点では、ブラウザーでウェブフォントへの対応は普及していませんでした。しかし、テキストを正しく描画するためには、正しいフォントファイルへのアクセスが不可欠であるため、この機能を提供するためにフォント記述技術が SVG に追加されました。これは PostScript や OTF などの他のフォーマットとの互換性を目的としたものではなく、レンダリング時に書体情報を SVG に埋め込む簡単な手段です。

**メモ:** SVG フォントは、現在 Safari と Android ブラウザーのみが対応しています。

Internet Explorer は実装を検討しておらず、 Chrome 38 (および Opera 25) では機能から削除されており、 Firefox は WOFF に集中するために実装を無期限に延期しています。しかし、Batik や Inkscape の一部など、他のツールは SVG フォントの埋め込みに対応しています。

SVG フォントを定義するためのベースは `<font>` (en-US) 要素です。

フォントの定義
-------

フォントに必要なすべての情報を得ることに、連携して関わる要素がいくつかあります。始めに (仕様書 で示されている) 宣言の例、その後に詳しい説明を示します。

```html
<font id="Font1" horiz-adv-x="1000">
  <font-face
 font-family="Super Sans"
 font-weight="bold"
 font-style="normal"
 units-per-em="1000"
 cap-height="600"
 x-height="400"
 ascent="700"
 descent="300"
 alphabetic="0"
 mathematical="350"
 ideographic="400"
 hanging="500">
    <font-face-src>
      <font-face-name name="Super Sans Bold" />
    </font-face-src>
  </font-face>
  <missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
  <!-- Outline of exclamation point glyph -->
  <glyph unicode="!" horiz-adv-x="300"></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>
```

まずは `<font>` (en-US) 要素から始まります。これは id 要素を持っており、それは URI を通してフォントを参照する (後述) ために必要です。`horiz-adv-x` 属性は 1 つのグリフのパス定義に比べて、文字の幅を平均してどのくらい広げるかを定義します。値 `1000` は、作業を行うにあたりほどよい値を設定します。また、基本的なグリフボックスのレイアウトをさらに定義するための付随的な属性がいくつかあります。

`<font-face>` (en-US) 要素 CSS の `@font-face` 宣言と対になるものです。これはフォントウェイトやフォントスタイルの分類など、最終的なフォントの基本的なプロパティを定義します。前出の例で最も重要で、最初に定義するものは `font-family` です。この値は、CSS や SVG の `font-family` プロパティで参照することができます。`font-weight` および `font-style` 属性は、同じ目的を持ちます。その後に続く属性は、フォントレンダリングエンジンへのレンダリング指示になります。例えば、グリフ全体の高さを表すのがアセンダーです。

子要素である `<font-face-src>` (en-US) 要素は、CSS の `@font-face` 宣言の `src` プロパティに対応します。子要素の `<font-face-name>` (en-US) や `<font-face-uri>` (en-US) を用いて、フォントの宣言で外部のソースを指し示すことができます。前出の例では、レンダラーの手元に "Super Sans Bold" という名前のローカルフォントが存在する場合は、そのフォントを用いるべきであることを示します。

`<font-face-src>` (en-US) の後に `<missing-glyph>` (en-US) 要素があります。これはあるグリフがフォント内で見つからず、またフォールバックする仕組みもない場合に何を表示するべきかを定義します。またこの要素では、どのようにグリフを作成するかも示しています。単純にグラフィックの SVG コンテンツを内部に追加するのです。また、`<filter>` (en-US)、`<a>`、あるいは `<script>` といった、他の SVG 要素もここで用いることができます。ただし単純なグリフを作るなら、標準の SVG パスと同様に `d` 属性を追加することもできます。

実際のグリフは `<glyph>` (en-US) 要素で定義します。ここで最も重要な属性は `unicode` です。この属性は Unicode のコードポイントを定義して、その文字が `glyph` 要素で示すグリフで表現されます。`lang` 属性を指定した場合は、さらにグリフを特定の言語 (フォントを使用する側の `xml:lang` で示されます) のみに限定することができます。繰り返しになりますがグリフを定義するために任意の SVG を用いることができ、またユーザエージェントが対応するすばらしいエフェクトを用いることもできます。

`font` の内部では、さらに `<hkern>` (en-US) と `<vkern>` (en-US) の 2 つの要素を定義することができます。それぞれ、少なくとも 2 つの文字 (`u1` および `u2` 属性) への参照と、それらの文字間の距離をどの程度縮めるかを決定する属性 `k` を持ちます。以下の例では、ユーザーエージェントに "A" と "V" の文字を標準的な文字間の距離よりも近づけるように指示しています。

```html
<hkern u1="A" u2="V" k="20" />
```

フォントの参照
-------

これはとても単純です。これまで説明したようにフォントの宣言をひとまとめに収めた場合は、`font-family` 属性を用いるだけでよいのです。

```html
<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>
```

ただし、どこでどのようにフォントを定義するかの自由のために、複数の方法を自由に組み合わせてもかまいません。

### オプション: CSS @font-face の使用

リモートの (またはリモートでない) フォントの参照に `@font-face` を用いることができます。

```html
<font id="Super\_Sans">
  <!-- and so on -->
</font>

<style>
 @font-face {
 font-family: "Super Sans";
 src: url(#Super\_Sans);
 }
</style>

<text font-family="Super Sans">My text uses Super Sans</text>
```

### オプション: リモートフォントの参照

前に述べた `font-face-uri` で外部のフォントを参照することができ、高い再利用性を得ることができます。

```html
<font>
  <font-face font-family="Super Sans">
    <font-face-src>
      <font-face-uri xlink:href="fonts.svg#Super\_Sans" />
    </font-face-src>
  </font-face>
</font>
```

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


基本的な座標変換 - SVG: スケーラブルベクターグラフィック

基本的な座標変換
========

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

これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、 `<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 倍になります。

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


例 - SVG: スケーラブルベクターグラフィック

例
=

この例で、私達は XHTML 、 SVG 、 JavaScript と DOM 2 を「ほこり」の群れを動かすのにつかっています。これらのほこりは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがマウスカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組み合わせることで、このとても自然に見える動きができます。

これは完全に Flash やその他のベンダ特有の拡張を用いずに、 W3C 標準- XHTML と SVG と JavaScript で実現されています。これは Firefox 1.5 以上で動作します。

実行例を表示

```xml
<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
  <head>
  <title>ほこりの群</title>
  <style type='text/css'>
  <![CDATA[
 label, input
 {
 width: 150px;
 display: block;
 float: left;
 margin-bottom: 10px;
 }
 label
 {
 text-align: right;
 width: 75px;
 padding-right: 20px;
 }
 br
 {
 clear: left;
 }
 ]]>
  </style>
  </head>
  <body onload='update()'>
    <svg:svg id='display' width='400' height='300'>
      <svg:circle id='cursor' cx='200'
cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/>
    </svg:svg>

    <p>ほこりの群れは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組みあわせることで、このとても自然に見える動きができます。</p>

    <p>
    これは完全に Flash やその他のベンダ特有の拡張を用いずに、 W3C 標準 – XHTML / SVG / JavaScript - によって実現されています。現在のところ、これは Mozilla Firefox 1.5 以上で動作するでしょう。</p>

    <div>
    (C) 2006 <a id='emailme' href='#'>Nick Johnson</a>

    <script type='text/javascript'>
    <![CDATA[
 // spam ボット撃退
 var email = '@riovia.net';
 email ='nick' + email;
 document.getElementById('emailme').href = 'mailto:'+email;
 ]]>
    </script>
    This software is free for you to use in any way whatsoever,
    and comes with no warranty at all.</div>

    <form action="" onsubmit="return false;">
      <p>
      <label>ほこりの数:</label>
        <input id='num\_motes' value='5'/>
        <br/>

      <label>最大速度:</label>
        <input id='max\_velocity' value='15'/>
        <br/>

      <label>カーソルへの引力:</label>
        <input id='attract\_cursor' value='6'/>
        <br/>

      <label>仲間との反発力:</label>
        <input id='repel\_peer' value='5'/>
        <br/>
      </p>
    </form>

  <script type='text/javascript'>
  <![CDATA[

 // ほこりの配列
 var motes;

 // 表示用の要素の取得。
 function Display()
 {
 return document.getElementById('display');
 }

 // 表示用の要素の大きさを定義。
 // これを配列の 2 組タプル(x,y)として返す
 function Dimensions()
 {
 // 描画用の要素
 var display = Display();
 var width = parseInt( display.getAttributeNS(null,'width') );
 var height = parseInt( display.getAttributeNS(null,'height') );

 return [width,height];
 }

 // これはマウスの移動イベントで呼び出される
 var mouse\_x = 200, mouse\_y = 150;
 function OnMouseMove(evt)
 {
 mouse\_x = evt.clientX;
 mouse\_y = evt.clientY;

 var widget = document.getElementById('cursor');
 widget.setAttributeNS(null,'cx',mouse\_x);
 widget.setAttributeNS(null,'cy',mouse\_y);
 }
 document.onmousemove = OnMouseMove;

 // カーソルの (x,y) を定義
 function Cursor()
 {
 return [mouse\_x, mouse\_y];
 }

 // ほこりの平均 (x,y) を定義
 function AverageMotePosition()
 {
 if( !motes )
 return [0,0];

 if( motes.length == 0 )
 return [0,0];

 var i;
 var sum\_x=0, sum\_y=0;
 for(i=0; i<motes.length; i++)
 {
 sum\_x += motes[i].x;
 sum\_y += motes[i].y;
 }

 return [sum\_x/motes.length, sum\_y/motes.length];
 }

 // よりよい、整数の乱数
 function Rand(modulo)
 {
 return Math.round( Math.random() \* (modulo-1));
 }

 // Mote クラス
 function Mote()
 {
 // 描画領域の大きさ
 var dims = Dimensions();
 var width = dims[0], height = dims[1];

 // 始めるときのランダムな座標を選ぶ。
 this.x = Rand( width );
 this.y = Rand( height );

 // 速度の初期値はゼロ。
 this.vx = this.vy = 0;

 // 視覚的要素---初期状態ではなし
 this.elt = null;
 }

 // これをクラスに。
 new Mote();

 // Mote::applyForce() -- 与えられた方向に
 // 速度を調整。
 // 警告: 疑似的な物理 -- なんらかの/実際の/物理法則によって
 // 制御されているわけでありません
 Mote.prototype.applyForce = function(pos, mag)
 {
 if( pos[0] > this.x )
 this.vx += mag;
 else if( pos[0] < this.x )
 this.vx -= mag;

 if( pos[1] > this.y )
 this.vy += mag;
 else if( pos[1] < this.y )
 this.vy -= mag;
 }

 // Mote::capVelocity() -- ほこりの速度の
 // 上限を設定。
 Mote.prototype.capVelocity = function()
 {
 var max = parseInt( document.getElementById('max\_velocity').value );

 if( max < this.vx )
 this.vx = max;
 else if( -max > this.vx )
 this.vx = -max;

 if( max < this.vy )
 this.vy = max;
 else if( -max > this.vy )
 this.vy = -max;
 }

 // Mote::capPosition() -- ほこりの位置の
 // 上限下限を設定。
 Mote.prototype.capPosition = function()
 {
 var dims = Dimensions();
 if( this.x < 0 )
 this.x = 0;
 else if( this.x >= dims[0] )
 this.x = dims[0]-1;

 if( this.y < 0 )
 this.y = 0;
 else if( this.y >= dims[1] )
 this.y = dims[1]-1;
 }

 // Mote::move() -- ほこりの移動、スクリーンの更新。
 Mote.prototype.move = function()
 {
 // カーソルの引力を適応。
 var attract = parseInt( document.getElementById('attract\_cursor').value );
 var cursor = Cursor();
 this.applyForce(cursor, attract);

 // ほこりの位置の平均からの反発を適用
 var repel = parseInt( document.getElementById('repel\_peer').value );
 var average = AverageMotePosition();
 this.applyForce(average, -repel);

 // 速度にでたらめさを追加。
 this.vx += Rand(3)-1;
 this.vy += Rand(3)-1;

 // 速度の上限を適応
 this.capVelocity();

 // 速度を適応。
 var old\_x = this.x, old\_y = this.y;
 this.x += this.vx;
 this.y += this.vy;
 this.capPosition();

 // 描画。

 if( this.elt === null )
 {
 var svg = 'http://www.w3.org/2000/svg';
 this.elt = document.createElementNS(svg,'line');
 this.elt.setAttributeNS(null,'stroke','green');
 this.elt.setAttributeNS(null,'stroke-width','3');
 this.elt.setAttributeNS(null,'stroke-opacity','0.5');
 Display().appendChild( this.elt );
 }

 this.elt.setAttributeNS(null,'x1',old\_x);
 this.elt.setAttributeNS(null,'y1',old\_y);

 this.elt.setAttributeNS(null,'x2',this.x);
 this.elt.setAttributeNS(null,'y2',this.y);
 }

 function update()
 {
 // 最初の呼び出し?
 if( !motes )
 motes = [];

 // 幾つのほこりがあるべき ?
 var num = parseInt( document.getElementById('num\_motes').value );
 if( num < 0 )
 num = 0;

 // 量を厳密に確認。
 // 少なすぎ ?
 while( motes.length < num )
 motes.push( new Mote() );
 // あるいは多すぎ ?
 if( num == 0 )
 motes = [];
 else if( motes.length > num )
 motes = motes.slice(0,num-1);

 // ほこりをランダムに移動
 if( motes.length > 0 )
 motes[ Rand( motes.length ) ].move();

 // これを 100 分の 1 秒ごとに再実行。
 setTimeout('update()', 10);
 }
 ]]>
  </script>
  </body>
</html>
```


stroke-linejoin - SVG: スケーラブルベクターグラフィック

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: スケーラブルベクターグラフィック

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: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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)`


transform - SVG: スケーラブルベクターグラフィック

transform
=========

**`transform`** 属性は、要素とその要素の子に適用される変換定義のリストを定義します。

**メモ:** SVG2 では、 `transform` はプレゼンテーション属性であり、 CSS プロパティとして使用することができます。ただし、 CSS プロパティとこの属性との間には構文の違いがあるので注意が必要です。その場合に使用する具体的な構文については、 CSS プロパティの `transform` のドキュメントを参照してください。

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

例
-
```

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

```html
<svg
 viewBox="-40 0 150 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
 fill="grey"
 transform="rotate(-10 50 100)
 translate(-36 45.5)
 skewX(40)
 scale(1 0.5)">
    <path
 id="heart"
 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" />
  </g>

  <use xlink:href="#heart" fill="none" stroke="red" />
</svg>
```

SVG 1.1 では、 `<a>`, `<circle>`, `<clipPath>`, `<defs>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<switch>`, `<text>`, `<use>` の 16 要素でのみ使用することができました。

また、 SVG 1.1 からの遺物として、 `<linearGradient>` と `<radialGradient>` は `gradientTransform` 属性に対応しており、 `<pattern>` は `patternTransform` 属性に対応しており、どちらも `transform` 属性と全く同じように動作します。

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

変換関数
----

以下の変換関数は、 `transform` 属性の `<transform-list>` で使用することができます。

**警告:** 仕様書によれば、 CSS の変換関数も使用することができます。しかし、互換性は保証されていません。

### matrix

`matrix(<a> <b> <c> <d> <e> <f>)` 変換関数は、6 つの値の変換行列の形式で変形を指定します。 `matrix(a,b,c,d,e,f)` は次の変換行列を適用することと等価です。

(

a

c

e

b

d

f

0

0

1

)

\begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix}

 これは、前の座標系から新しい座標系への座標の写像を次の行列の等式によって行うものです。

(

x

newCoordSys

y

newCoordSys

1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

prevCoordSys

y

prevCoordSys

1

)

=

(

a

x

prevCoordSys

+
c

y

prevCoordSys

+
e

b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

1

)

 \begin{pmatrix} x\*{\mathrm{newCoordSys}} \ y\*{\mathrm{newCoordSys}} \ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\_{\mathrm{prevCoordSys}} \ y\_{\mathrm{prevCoordSys}} \ 1 \end{pmatrix} = \begin{pmatrix} a x\_{\mathrm{prevCoordSys}} + c y\_{\mathrm{prevCoordSys}} + e \ b x\_{\mathrm{prevCoordSys}} + d y\_{\mathrm{prevCoordSys}} + f \ 1 \end{pmatrix}

#### 例
```

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

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="20" fill="green" />

  <!--
 In the following example we are applying the matrix:
 [a c e] [3 -1 30]
 [b d f] => [1 3 40]
 [0 0 1] [0 0 1]

 which transform the rectangle as such:

 top left corner: oldX=10 oldY=10
 newX = a \* oldX + c \* oldY + e = 3 \* 10 - 1 \* 10 + 30 = 50
 newY = b \* oldX + d \* oldY + f = 1 \* 10 + 3 \* 10 + 40 = 80

 top right corner: oldX=40 oldY=10
 newX = a \* oldX + c \* oldY + e = 3 \* 40 - 1 \* 10 + 30 = 140
 newY = b \* oldX + d \* oldY + f = 1 \* 40 + 3 \* 10 + 40 = 110

 bottom left corner: oldX=10 oldY=30
 newX = a \* oldX + c \* oldY + e = 3 \* 10 - 1 \* 30 + 30 = 30
 newY = b \* oldX + d \* oldY + f = 1 \* 10 + 3 \* 30 + 40 = 140

 bottom right corner: oldX=40 oldY=30
 newX = a \* oldX + c \* oldY + e = 3 \* 40 - 1 \* 30 + 30 = 120
 newY = b \* oldX + d \* oldY + f = 1 \* 40 + 3 \* 30 + 40 = 170
 -->
  <rect
 x="10"
 y="10"
 width="30"
 height="20"
 fill="red"
 transform="matrix(3 1 -1 3 30 40)" />
</svg>
```

### translate

`translate(<x> [<y>])` 変換関数は、オブジェクトを `x` と `y` によって移動します。 `y` が提供されなかった場合は、 `0` と見なします。

言い換えれば、次の通りです。
```

xnew = xold + <x>
ynew = yold + <y>
```

#### 例
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- No translation -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

  <!-- Horizontal translation -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="blue"
 transform="translate(50)" />

  <!-- Vertical translation -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="red"
 transform="translate(0 50)" />

  <!-- Both horizontal and vertical translation -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="yellow"
 transform="translate(50 50)" />
</svg>
```

### scale

`scale(<x> [<y>])` 変換関数は、 `x` と `y` による拡大縮小操作を指定します。 `y` が提供されなかった場合は、 `x` と同じと見なします。

#### 例
```

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

```html
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- uniform scale -->
  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />

  <!-- vertical scale -->
  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />

  <!-- horizontal scale -->
  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />

  <!-- No scale -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>
```

### rotate

`rotate(<a> [<x> <y>])` 変換関数は、指定された点を軸に `a` 度の回転を指定します。オプションの引数 `x` と `y` が提供されなかった場合、回転は現在のユーザーの座標系の原点を基準に行われます。オプションの引数 `x` と `y` が指定された場合は、回転は `(x, y)` を基準に行われます。

#### 例
```

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

```html
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10" />

  <!-- rotation is done around the point 0,0 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- rotation is done around the point 10,10 -->
  <rect
 x="0"
 y="0"
 width="10"
 height="10"
 fill="green"
 transform="rotate(100, 10, 10)" />
</svg>
```

### skewX

`skewX(<a>)` 変換関数は、 X 軸を基準に `a` 度の傾斜変換を指定します。

#### 例
```

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

```html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>
```

### skewY

`skewY(<a>)` 変換関数は、 Y 軸を基準に `a` 度の傾斜変換を指定します。

#### 例
```

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

```html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>
```

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # svg-transform |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |


stroke-miterlimit - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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.


filterUnits - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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: スケーラブルベクターグラフィック

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 - 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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 |


end - SVG: スケーラブルベクターグラフィック

end
===

**`end`** 属性は、アクティブな期間を制限できるアニメーションの終了値を定義します。

5 つの要素がこの属性を使用しています。 `<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, `<set>` です。

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

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

`<end-value-list>` は値のセミコロン区切りのリストです。それぞれの値は以下のうちの 1 つです。

`<offset-value>`

この値は時点を表す clock-value を、 SVG 文書の始まり (通常は `load` (en-US) または `DOMContentLoaded` イベント) からの相対で定義します。負の数も有効です。

`<syncbase-value>`

 この値は *syncbase* と、任意でその *syncbase* からのオフセットを定義します。要素のアニメーションの終了時刻は、他のアニメーションの開始またはアクティブ状態の終了からの相対で定義します。
 有効な syncbase-value は、他のアニメーション要素への ID による参照にドット、そして `begin` または `end` が続き、参照先のアニメーション要素の開始とアクティブ状態の終了のどちらと同期するかを識別します。 `<offset-value>` で定義される任意のオフセット値を追加することができます。

`<event-value>`

 この値はイベントと任意のオフセットで定義し、要素のアニメーションが終了する時刻を特定します。アニメーションの終了時刻は、指定されたイベントが発生した時刻からの相対で定義します。
 有効な event-value は、要素 ID の後にドットと、その要素の対応しているイベントのうちの一つが続きます。すべての有効なイベントは (すべての要素で対応しているとは限りません) DOM および HTML の仕様書で定義されています。これらは、 `focus`, `blur`, `focusin`, `focusout`, `activate`, `auxclick`, `click`, `dblclick`, `mousedown`, `mouseenter`, `mouseleave`, `mousemove`, `mouseout`, `mouseover`, `mouseup`, `wheel`, `beforeinput`, `input`, `keydown`, `keyup`, `compositionstart`, `compositionupdate`, `compositionend`, `load` (en-US), `unload`, `abort`, `error`, `select`, `resize`, `scroll`, `beginEvent` (en-US), `endEvent` (en-US), `repeatEvent` (en-US) です。 `<offset-value>` で定義される任意のオフセット値を追加することができます。

`<repeat-value>`

 この値は修飾された repeat イベントを定義します。この要素のアニメーション終了時刻は指定された回数の repeat イベントが発生したときからの相対で定義されます。
 有効な event-value は、要素 ID の後にドットと `repeat()` 関数に繰り返し回数を指定する整数値を引数として指定したものです。 `<offset-value>` で定義される任意のオフセット値を追加することができます。

`<accessKey-value>`

 この値はアニメーションの終了のきっかけとなるアクセスキーを定義します。要素のアニメーションはユーザーが指定されたキーを押したときに終了します。
 有効な accessKey-value は、 `accessKey()` 関数に入力される文字を引数として渡したものです。 `<offset-value>` で定義される任意のオフセット値を追加することができます。

`<wallclock-sync-value>`

 この値はアニメーションの終了時刻を現実世界の時刻で定義します。
 有効な wallclock-sync-value は `wallclock()` 関数に時刻を引数として渡したものです。時刻の構文は ISO 8601 で定義された構文に基づいたものです。

`indefinite`

アニメーションの終了は、 `SVGAnimationElement.endElement()` メソッド呼び出しで指定されます。

例
-

### オフセットの例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="100"
 begin="0s"
 end="8s"
 fill="freeze" />
  </rect>

  <rect x="10" y="60" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="75"
 begin="0s"
 end="6s"
 fill="freeze" />
  </rect>

  <rect x="10" y="85" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="50"
 begin="0s"
 end="4s"
 fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>
```

### イベントの例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="0s"
 end="endButton.click"
 dur="8s"
 repeatCount="indefinite"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
 id="endButton"
 style="cursor:pointer;"
 x="19.5"
 y="62.5"
 rx="5"
 height="25"
 width="80"
 fill="#EFEFEF"
 stroke="black"
 stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

### アクセスキーの例

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="0s"
 end="accessKey(e)"
 dur="8s"
 repeatCount="indefinite"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

*この例は iFrame に埋め込まれています。キーイベントを有効化したい場合は、まずクリックする必要があります。*

仕様書
---

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


SVG プレゼンテーション属性 - SVG: スケーラブルベクターグラフィック

SVG プレゼンテーション属性
===============

SVG プレゼンテーション属性は、SVG 要素の属性として使用される CSS プロパティです。

* alignment-baseline
* baseline-shift
* clip
* clip-path
* clip-rule
* color
* color-interpolation
* color-interpolation-filters
* color-profile
* color-rendering
* cursor
* d
* direction
* display
* dominant-baseline
* enable-background
* fill
* fill-opacity
* fill-rule
* filter
* flood-color
* flood-opacity
* font-family
* font-size
* font-size-adjust
* font-stretch
* font-style
* font-variant
* font-weight
* glyph-orientation-horizontal
* glyph-orientation-vertical
* image-rendering
* kerning
* letter-spacing
* lighting-color
* marker-end
* marker-mid
* marker-start
* mask
* opacity
* overflow
* pointer-events
* shape-rendering
* solid-color
* solid-opacity
* stop-color
* stop-opacity
* stroke
* stroke-dasharray
* stroke-dashoffset
* stroke-linecap
* stroke-linejoin
* stroke-miterlimit
* stroke-opacity
* stroke-width
* text-anchor
* text-decoration
* text-rendering
* transform
* unicode-bidi
* vector-effect
* visibility
* word-spacing
* writing-mode
属性
--

`alignment-baseline`

 これは、オブジェクトが親に対してフォントのベースラインに沿ってどのように配置されるかを指定するものです。
 *値*: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`、*アニメーション*: **可**

`baseline-shift (en-US)`

 これにより、親テキストコンテンツ要素のドミナントベースラインに対するドミナントベースラインの相対的な位置を変更することができます。
 *値*: **`auto`**|`baseline`|`super`|`sub`|<percentage>|<length>|`inherit`、*アニメーション*: **可**

`clip (en-US)`
非推奨

 要素のどの部分が見えるかを定義します。
 *値*: **`auto`**|`<shape>`|`inherit`、*アニメーション*: **可**

`clip-path (en-US)`

 適用された要素を指定された `<clipPath>` 要素に結びつけます。
 *値*: **`none`**|<FuncIRI>|`inherit`、*アニメーション*: **可**

`clip-rule (en-US)`

`<clipPath>` が対象を切り取る方法を知るために、パスのどの辺がシェイプの内側にあるかを判断する方法を指定します。
 *値*: **`nonezero`**|`evenodd`|`inherit`、*アニメーション*: **可**

`color`

 間接的な値の候補 (`currentcolor`) を `fill`, `stroke`, `stop-color`, `flood-color`, `lighting-color` の各属性に与えるために使用します。
 *値*: <color>|`inherit`、*アニメーション*: **可**

`color-interpolation (en-US)`

 グラデーションの補間、色のアニメーション、アルファ合成で使用する色空間を指定します。
 *値*: `auto`|**`sRGB`**|`linearRGB`|`inherit`、*アニメーション*: **可**

`color-interpolation-filters (en-US)`

 フィルター効果を通して行われる画像演算で使用する色空間を指定します。
 *値*: `auto`|`sRGB`|**`linearRGB`**|`inherit`、*アニメーション*: **可**

`color-profile (en-US)`
非推奨

`<image>` 要素を通して取り込まれるラスター画像に使用すべきカラープロファイルを定義します。
 *値*: `auto`|`sRGB`|`linearRGB`|<name>|<IRI>|`inherit`、*アニメーション*: **可**

`color-rendering`

 これは、色の補間や合成の操作を最適化するためのヒントをブラウザーに与えます。
 *値*: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`、*アニメーション*: **可**

`cursor (en-US)`

 マウスポインターが要素上に来た場合に表示されるマウスカーソルを指定します。
 *値*: <FuncIRI>|<keywords>|`inherit`、*アニメーション*: **可**

`d`

 描画するパスを定義します。
 *値*: path() (en-US)|`none`

`direction (en-US)`

 テキストの基本的な書字方向を指定します。
 *値*: **`ltr`**|`rtl`|`inherit`、*アニメーション*: **可**

`display (en-US)`

 グラフィックやコンテナー要素の表示を制御することができます。
 *値*: CSS の`display`、*アニメーション*: **可**

`dominant-baseline (en-US)`

 ボックスのテキストやインラインレベルのコンテンツを配置するために使用されるベースラインを定義します。
 *値*: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`、*アニメーション*: **可**

`enable-background (en-US)`
非推奨

 背景画像の蓄積をどのように管理するかをブラウザーに伝えます。
 *値*: **`accumulate`**|`new`|`inherit`; *アニメーション*: **不可**

`fill`

 適用されるグラフィック要素の内側の色を定義します。
 *値*: <paint>、*アニメーション*: **可**

`fill-opacity`

 現在のオブジェクトが塗りつぶされる色やコンテンツの不透明度を指定します。
 *値*: <number>|<percentage>、*アニメーション*: **可**

`fill-rule (en-US)`

 パスのどの辺がシェイプの内側にあるかを判断する方法を示します。
 *値*: **`nonzero`**|`evenodd`|`inherit`、*アニメーション*: **可**

`filter (en-US)`

`<filter>` (en-US) 要素で定義されたフィルター効果を、その要素に適用することを定義します。
 *値*: <FuncIRI>|**`none`**|`inherit`、*アニメーション*: **可**

`flood-color (en-US)`

`<feFlood>` (en-US) または `<feDropShadow>` 要素で定義された現在のフィルタープリミティブの部分領域を塗りつぶすために使用する色を示します。
 *値*: <color>、*アニメーション*: **可**

`flood-opacity (en-US)`

`<feFlood>` (en-US) または `<feDropShadow>` 要素で定義された現在のフィルタープリミティブの部分領域で使用する不透明度の値を示します。
 *値*: <number>|<percentage>、*アニメーション*: **可**

`font-family (en-US)`

 要素のテキストを描画するためにどのフォントファミリーが使用されるかを示します。
 *値*: CSS の`font-family` を参照、*アニメーション*: **可**

`font-size (en-US)`

 フォントの大きさを指定します。
 *値*: CSS の`font-size` を参照、*アニメーション*: **可**

`font-size-adjust (en-US)`

 大文字の高さではなく、小文字の高さに基づいてフォントの大きさを選択することを指定します。
 *値*: <number>|**`none`**|`inherit`、*アニメーション*: **可**

`font-stretch (en-US)`

 フォントのフェイスを normal, condensed, expanded から選択します。
 *値*: CSS の `font-stretch` を参照、*アニメーション*: **可**

`font-style (en-US)`

 これは、フォントの `font-family (en-US)` から、通常、イタリック体、斜体のいずれのスタイルにするかを指定します。
 *値*: **`normal`**|`italic`|`oblique`、*アニメーション*: **可**

`font-variant (en-US)`

 スモールキャップや合字など、フォントのバリエーションの一部を使用するかどうかを指定します。
 *値*: CSS の`font-variant`、*アニメーション*: **可**

`font-weight (en-US)`

 フォントの太さを指定します。
 *値*: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`、*アニメーション*: **可**

`glyph-orientation-horizontal (en-US)`
非推奨

 inline-progression-direction が horizontal の場合の字体の向きを制御します。
 *値*: <angle>|`inherit`; *アニメーション*: **不可**

`glyph-orientation-vertical (en-US)`
非推奨

 inline-progression-direction が vertical の場合の字体の向きを制御します。
 *値*: **`auto`**|<angle>|`inherit`; *アニメーション*: **不可**

`image-rendering (en-US)`

 画像処理を行う際に、速度と品質のどちらを重視するかのヒントをブラウザーに与えます。
 *値*: **`auto`**|`optimizeQuality`|`optimizeSpeed`、*アニメーション*: **可**

`kerning (en-US)`
非推奨

 ブラウザーが字間を調整するかどうかを示します。
 *値*: **`auto`**|<length>|`inherit`、*アニメーション*: **可**

`letter-spacing (en-US)`

 テキスト文字の間の字間を制御します。
 *値*: **`normal`**|<length>|`inherit`、*アニメーション*: **可**

`lighting-color (en-US)`

 フィルタープリミティブ要素 `<feDiffuseLighting>` (en-US) および `<feSpecularLighting>` (en-US) のための光源のの色を定義します。
 *値*: <color>、*アニメーション*: **可**

`marker-end (en-US)`

 これは、与えられた `<path>` 要素や基本図形の最後の頂点に描かれる矢尻やポリマーカーを定義します。
 *値*: <FuncIRI>|**`none`**|`inherit`、*アニメーション*: **可**

`marker-mid`

 これは、与えられた `<path>` 要素や基本図形の最初と最後を除いた頂点に描かれる矢尻やポリマーカーを定義します。
 *値*: <FuncIRI>|**`none`**|`inherit`、*アニメーション*: **可**

`marker-start (en-US)`

 これは、与えられた `<path>` 要素や基本図形の最初の頂点に描かれる矢尻やポリマーカーを定義します。
 *値*: <FuncIRI>|**`none`**|`inherit`、*アニメーション*: **可**

`mask (en-US)`

 特定の位置で画像をマスクしたり切り取ったりすることで、要素の可視性を変更します。
 *値*: CSS の`mask`、*アニメーション*: **可**

`opacity (en-US)`

 単一のオブジェクトまたはオブジェクトのグループの透過性を指定します。
 *値*: <opacity-value>、*アニメーション*: **可**

`overflow (en-US)`

 ブロックレベル要素のコンテンツが要素のボックスからはみ出したときに切り取るかどうかを指定します。
 *値*: **`visible`**|`hidden|scroll`|`auto`|`inherit`、*アニメーション*: **可**

`pointer-events (en-US)`

 要素がマウスイベントのターゲットになれるかどうか、いつなるかを定義します。
 *値*: `bounding-box`|**`visiblePainted`**|`visibleFil`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`、*アニメーション*: **可**

`shape-rendering (en-US)`

 ブラウザーが `<path>` 要素や基本的な図形を描画する際に、どのようなトレードオフを行うかについてのヒントです。
 *値*: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`、*アニメーション*: **可**

`solid-color`

 -
 *値*:; *Animatable*: **-**

`solid-opacity`

 -
 *値*:; *Animatable*: **-**

`stop-color`

 グラデーションの色停止点で使用する色を示します。
 *値*: `currentcolor`|<color>|<icccolor>|`inherit`、*アニメーション*: **可**

`stop-opacity (en-US)`

 グラデーションの色停止点の(不)透明度を定義します。
 *値*: <opacity-value>|`inherit`、*アニメーション*: **可**

`stroke`

 図形の輪郭を描くのに使用する色を定義します。
 *値*: <paint>、*アニメーション*: **可**

`stroke-dasharray`

 図形の輪郭を描くのに使用する破線と隙間のパターンを定義します。
 *値*: `none`|`<dasharray>`、*アニメーション*: **可**

`stroke-dashoffset`

 関連するダッシュ配列を描画する際のオフセットを定義します。
 *値*: <percentage>|<length>、*アニメーション*: **可**

**`stroke-linecap`**

 開いたサブパスを描いたときに、その端点に使用する形状を定義します。
 *値*: **`butt`**|`round`|`square`、*アニメーション*: **可**

**`stroke-linejoin`**

 パスの角を描いたときに使用する形状を定義します。
 *値*: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`、*アニメーション*: **可**

**`stroke-miterlimit`**

 マイター結合の描画に使用される `stroke-width (en-US)` に対するマイターの長さの比率の制限を定義します。
 *値*: <number>、*アニメーション*: **可**

**`stroke-opacity (en-US)`**

 図形の線の(不)透明度を定義します。
 *値*: <opacity-value>|<percentage>、*アニメーション*: **可**

**`stroke-width (en-US)`**

 図形に適用される線の太さを定義します。
 *値*: <length>|<percentage>、*アニメーション*: **可**

**`text-anchor (en-US)`**

 テキストの文字列の垂直方向の配置を定義します。
 *値*: `start`|`middle`|`end`|**`inherit`**、*アニメーション*: **可**

**`text-decoration (en-US)`**

 テキストの装飾線の外見を設定します。
 *値*: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**、*アニメーション*: **可**

**`text-rendering (en-US)`**

 ブラウザーでテキストを描画する際に何をトレードオフにするかについてのヒントです。
 *値*: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`、*アニメーション*: **可**

**`transform`**

 要素と要素の子に適用される座標変換定義のリストを定義します。
 *値*: <transform-list>、*アニメーション*: **可**

**`unicode-bidi (en-US)`**

 -
 *値*:; *Animatable*: **-**

**`vector-effect`**

 オブジェクトを描画する際に使用するベクター効果を指定します。
 *値*: `default`|`non-scaling-stroke`|`inherit`|`<uri>`、*アニメーション*: **可**

**`visibility (en-US)`**

 グラフィック要素の可視性を制御することができます。
 *値*: **`visible`**|`hidden`|`collapse`|`inherit`、*アニメーション*: **可**

**`word-spacing (en-US)`**

 単語間の空白の動作を指定します。
 *値*: <length>|**`inherit`**、*アニメーション*: **可**

**`writing-mode`**

`<text>` 要素の最初のインライン進行方向を、左から右、右から左、上から下のどれにするかを指定します。
 *値*: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`、*アニメーション*: **可**

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

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


SVG コア属性 - SVG: スケーラブルベクターグラフィック

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 - SVG: スケーラブルベクターグラフィック

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 イベント属性 - SVG: スケーラブルベクターグラフィック

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 条件処理属性
==========

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.


x - SVG: スケーラブルベクターグラフィック

x
=

**`x`** 属性はユーザー座標系の X 軸の座標を定義します。

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

* `<altGlyph>`
* `<cursor>` (en-US)
* `<feBlend>` (en-US)
* `<feColorMatrix>`
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDropShadow>`
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>`
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<foreignObject>`
* `<glyphRef>` (en-US)
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>` (en-US)
* `<text>`
* `<tref>` (en-US)
* `<tspan>`
* `<use>`
例
-
```

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="60" height="60" />
  <rect x="120" y="20" width="60" height="60" />
  <rect x="220" y="20" width="60" height="60" />
</svg>
```

altGlyph
--------

**警告:** SVG2 では `<altGlyph>` は非推奨であるため、使用しないでください。

`<altGlyph>` の場合、 `x` は代替文字の X 軸の座標を定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 のリスト
  |
| 既定値 | *なし* |
| アニメーション | 可 |

feBlend
-------

`<feBlend>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feColorMatrix
-------------

`<feColorMatrix>` の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feComponentTransfer
-------------------

`<feComponentTransfer>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feComposite
-----------

`<feComposite>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feConvolveMatrix
----------------

`<feConvolveMatrix>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feDiffuseLighting
-----------------

`<feDiffuseLighting>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feDisplacementMap
-----------------

`<feDisplacementMap>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feDropShadow
------------

`<feDropShadow>` の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feFlood
-------

`<feFlood>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feFuncA
-------

`<feFuncA>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feFuncB
-------

`<feFuncB>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feFuncG
-------

`<feFuncG>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feFuncR
-------

`<feFuncR>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feGaussianBlur
--------------

`<feGaussianBlur>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feImage
-------

`<feImage>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feMerge
-------

`<feMerge>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feMergeNode
-----------

`<feMergeNode>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feMorphology
------------

`<feMorphology>` の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feOffset
--------

`<feOffset>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

fePointLight
------------

`<fePointLight>` (en-US) の場合、 `x` は `<filter>` (en-US) 要素の `primitiveUnits (en-US)` 属性で定義される座標系での光源の X 位置を定義します。

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

feSpecularLighting
------------------

`<feSpecularLighting>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feSpotLight
-----------

`<feSpotLight>` (en-US) の場合、 `x` は `<filter>` (en-US) 要素の `primitiveUnits (en-US)` 属性で定義される座標系での光源の X 位置を定義します。

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

feTile
------

`<feTile>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

feTurbulence
------------

`<feTurbulence>` (en-US) の場合、 `x` はこのプリミティブの描画領域における最小の X 座標を定義します。

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

filter
------

`<filter>` (en-US) の場合、 `x` はこのフィルターの描画領域における左上隅の X 座標をを定義します。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `-10%` |
| アニメーション | 可 |

foreignObject
-------------

`<foreignObject>` の場合、 `x` はこのフィルターの描画領域における左上隅の X 座標をを定義します。

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

**メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は `<foreignObject>` の CSS プロパティとして使用することもできます。

glyphRef
--------

**警告:** SVG2 では `<glyphRef>` (en-US) は非推奨であり、使用すべきではありません。

`<glyphRef>` (en-US) の場合、 `x` が文字の x 軸の座標を定義します。

|  |  |
| --- | --- |
| 値 | **<number>** |
| 既定値 | 最初の glyphRef では `0`、それ以降の兄弟 `<glyphRef>` (en-US) では直前の `<glyphRef>` (en-US) における末尾の X 座標。 |
| アニメーション | 可 |

image
-----

`<image>` の場合、 `x` はこの画像の左上隅の X 座標を定義します。

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

**メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は画像用の CSS プロパティとしても使用できます。

mask
----

`<mask>` の場合、 `x` は、その影響する領域の左上隅の X 座標を定義します。この属性の正確な効果は、 `maskUnits (en-US)` 属性に影響されます。

|  |  |
| --- | --- |
| 値 | **<length>**
 |
 **<percentage>** |
| 既定値 | `-10%` |
| アニメーション | 可 |

pattern
-------

`<pattern>` の場合、 `x` はタイルパターンの左上隅の x 座標を定義します。この属性の正確な効果は、 `patternUnits` と `patternTransform (en-US)` 属性に影響されます。

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

rect
----

`<rect>` の場合、 `x` は図形の左上隅の X 座標を定義します。

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

**メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は矩形の CSS プロパティとして使用することもできる。

svg
---

`<svg>` の場合、 `x` はそのビューポートの左上隅の x 座標を定義します。

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

**メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は `<svg>` の CSS プロパティとして使用することもできます。

text
----

`<text>` にある値が 1 つの場合、 `x` は*コンテンツテキストの位置*を配置しなければならない X 座標を定義します。コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置は、 `text-anchor (en-US)` や `direction` など、他のプロパティの影響を受けます。

複数の値がある場合、`x` はテキストから個々の文字への X 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

|  |  |
| --- | --- |
| 値 |
 (**<length>**
 |
 **<percentage>**) のリスト
  |
| 既定値 | `0` |
| アニメーション | 可 |
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <!-- x with a single value -->
  <text y="40%" x="50%">SVG</text>

  <!-- x with multiple values -->
  <text y="90%" x="25%, 50%, 75%">SVG</text>
</svg>
```

```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

tref
----

**警告:** SVG2 では `<tref>` (en-US) は非推奨であり、使用すべきではありません。

`<tref>` (en-US) にある値が 1 つの場合、 `x` は*コンテンツテキストの位置*を配置しなければならない X 座標を定義します。コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置は、 `text-anchor (en-US)` や `direction` など、他のプロパティの影響を受けます。

複数の値がある場合、`x` はテキストから個々の文字への X 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

|  |  |
| --- | --- |
| 値 |
 (**<length>**
 |
 **<percentage>**) のリスト
  |
| 既定値 | `0` |
| アニメーション | 可 |

tspan
-----

`<tspan>` にある値が 1 つの場合、 `x` は*コンテンツテキストの位置*を配置しなければならない X 座標を定義します。コンテンツテキストの位置*は、通常、テキストの最初の行のベースライン上の点です。正確な*コンテンツテキスト位置\*は、 `text-anchor (en-US)` や `direction` など、他のプロパティの影響を受けます。

複数の値がある場合、`x` はテキストから個々の文字への X 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

|  |  |
| --- | --- |
| 値 |
 List of (**<length>**
 |
 **<percentage>**)
  |
| 既定値 | *なし* |
| アニメーション | 可 |
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="90%" x2="100%" y2="90%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="25%" y1="0" x2="25%" y2="100%" />
  <line x1="50%" y1="0" x2="50%" y2="100%" />
  <line x1="75%" y1="0" x2="75%" y2="100%" />

  <text>
    <!-- x with a single value -->
    <tspan y="40%" x="50%">SVG</tspan>

    <!-- x with multiple values -->
    <tspan y="90%" x="25%, 50%, 75%">SVG</tspan>
  </text>
</svg>
```

```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

use
---

`<use>` の場合， `x` は参照される要素の左上隅の x 座標を定義します．

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

**メモ:** SVG2 からは、`x` は*幾何プロパティ*であり、この属性は使用される要素の CSS プロパティとしても使用できます。

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-x |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-x |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-x |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-x |
| CSS Masking Module Level 1 # element-attrdef-mask-x |
| Scalable Vector Graphics (SVG) 2 # X |
| Scalable Vector Graphics (SVG) 2 # PatternElementXAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementXAttribute |


vector-effect - SVG: スケーラブルベクターグラフィック

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: スケーラブルベクターグラフィック

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.


alignment-baseline - SVG: スケーラブルベクターグラフィック

alignment-baseline
==================

**`alignment-baseline`** 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は `alignment-baseline` プロパティの計算値と同じ名前の値となります。

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

プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは `<tspan>`, `<tref>` (en-US), `<altGlyph>`, and `<textPath>` (en-US) の 4 つの属性のみです。

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

|  |  |
| --- | --- |
| 値 | `auto` | `baseline` | `before-edge` |
 `text-before-edge` | `middle` |
 `central` | `after-edge` |
 `text-after-edge` | `ideographic` |
 `alphabetic` | `hanging` |
 `mathematical` | `top` | `center` |
 `bottom` |
| 既定値 | `auto` |
| アニメーション | 可 |

`auto`
非推奨

この値はその文字が所属する書法のドミナントベースラインです。すなわち、親のドミナントベースラインを使用します。

`baseline`

Uses the dominant baseline choice of the parent. Matches the box's corresponding baseline to that of its parent.

`before-edge`
非推奨

The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.

`text-bottom`

Matches the bottom of the box to the top of the parent's content area.

`text-before-edge`

The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.

**メモ:** This keyword may be mapped to `text-top`.

`middle`

Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

`central`

Matches the box's central baseline to the central baseline of its parent.

`after-edge`
非推奨

The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.

`text-top`

Matches the top of the box to the top of the parent's content area.

`text-after-edge`

The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.

**メモ:** This keyword may be mapped to `text-bottom`.

`ideographic`

Matches the box's ideographic character face under-side baseline to that of its parent.

`alphabetic`

Matches the box's alphabetic baseline to that of its parent.

`hanging`

The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.

`mathematical`

Matches the box's mathematical baseline to that of its parent.

`top`

Aligns the top of the aligned subtree with the top of the line box.

`center`

Aligns the center of the aligned subtree with the center of the line box.

`bottom`

Aligns the bottom of the aligned subtree with the bottom of the line box.

SVG 2 introduces some changes to the definition of this property. In particular: the values `auto`, `before-edge`, and `after-edge` have been removed. For backwards compatibility, `text-before-edge` may be mapped to `text-top` and `text-after-edge` to `text-bottom`. Neither `text-before-edge` nor `text-after-edge` should be used with the `vertical-align` property.

例
-

```html
<svg
 width="300"
 height="120"
 viewBox="0 0 300 120"
 xmlns="http://www.w3.org/2000/svg">
  <!-- Materialisation of anchors -->
  <path
 d="M60,10 L60,110
 M30,10 L300,10
 M30,65 L300,65
 M30,110 L300,110
 "
 stroke="grey" />

  <!-- Anchors in action -->
  <text alignment-baseline="hanging" x="60" y="10">A hanging</text>

  <text alignment-baseline="middle" x="60" y="65">A middle</text>

  <text alignment-baseline="baseline" x="60" y="110">A baseline</text>

  <!-- Materialisation of anchors -->
  <circle cx="60" cy="10" r="3" fill="red" />
  <circle cx="60" cy="65" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style>
 <![CDATA[
 text{
 font: bold 36px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]>
 </style>
</svg>
```

他の要素 (`<text>` など) におけるオブジェクトの配置については、 `dominant-baseline (en-US)` を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # alignment-baseline-property |
| Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty |

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

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

関連情報
----

* `CSS alignment-baseline`