第8章: 座標系・変換・単位

8.1. はじめに

すべてのSVGコンテンツは SVGビューポート 内に描画されます。 SVGビューポートはそれぞれ、サイズ（幅、高さ）と原点によって特徴付けられる描画領域を定義し、原点は抽象的な ユーザー単位 で測定されます。

SVGビューポートという用語は CSSの「viewport」 用語とは異なります。

初期ビューポートは、トップレベルのSVGビューポートであり、親環境（例えばウェブブラウザのCSSピクセル）で使われる座標系とユーザー単位との間の対応付けを確立します。初期ビューポートの確立については、初期ビューポートで詳しく説明します。

SVGビューポートは要素によってのみ確立されます。どの要素がビューポートを生成するかの詳細は 新しいSVGビューポートの確立を参照してください。

各SVGビューポートは ビューポート座標系 と ユーザー座標系 を生成し、初期状態では両者は一致します。 ビューポートの要素に‘viewBox’属性を指定すると、ユーザー座標系がビューポート座標系に対して変換されます（詳細は ‘viewBox’属性参照）。ビューポートの子要素はさらにユーザー座標系を変更できます。例えば、transformプロパティを指定した場合などです。

SVGビューポートは入れ子にできます。パーセンテージ単位は最も近い祖先SVGビューポートの幅と高さを基準に解決されます。したがって、SVGビューポートの入れ子構造はパーセンテージ単位の意味を再定義し、特定の矩形領域に対してグラフィックを「フィット」させるための新しい参照矩形を提供できます。

SVGビューポートの幅・高さ・原点は、SVGビューポートを生成するSVG文書断片とその親（明示的または暗黙的）との間で交渉によって決定されます。交渉プロセスの詳細は 新しいSVGビューポートの確立を参照してください。

デフォルトでは、入れ子SVGビューポートのビューポート座標系は、親要素のローカル座標系に等しく、SVGビューポート要素の原点で平行移動されたものとなります。ただし、SVGビューポート要素にtransformプロパティが指定されている場合は、親要素のユーザー座標系に対してビューポート座標系が変更されます。

抽象的には、すべてのSVGビューポートは キャンバス （すべての関連次元で無限に広い描画領域）に埋め込まれています。

8.2. SVGビューポートの等価変換の計算

このプロセスは、viewBox属性のmin-x, min-y, width, heightの値、viewBox属性が定義されている要素の位置とサイズ、およびその要素のpreserveAspectRatio属性値を、要素内コンテンツに適用される平行移動と拡大縮小へ変換します。

  1. vb-x, vb-y, vb-width, vb-heightをviewBox属性のmin-x, min-y, width, heightの値とする。
  2. e-x, e-y, e-width, e-heightを要素の位置とサイズとする。
  3. alignをpreserveAspectRatioのalign値、preserveAspectRatioが未定義の場合は'xMidYMid'とする。
  4. meetOrSliceをpreserveAspectRatioのmeetOrSlice値、preserveAspectRatio未定義またはmeetOrSlice値が省略されている場合は'meet'とする。
  5. scale-xをe-width/vb-widthで初期化する。
  6. scale-yをe-height/vb-heightで初期化する。
  7. alignが'none'でなく、かつmeetOrSliceが'meet'なら、scale-xとscale-yの大きい方を小さい方に合わせる。
  8. それ以外でalignが'none'でなく、かつmeetOrSliceが'slice'なら、scale-xとscale-yの小さい方を大きい方に合わせる。
  9. translate-xをe-x - (vb-x * scale-x)で初期化する。
  10. translate-yをe-y - (vb-y * scale-y)で初期化する。
  11. alignに'xMid'が含まれていれば、(e-width - vb-width * scale-x) / 2をtranslate-xへ加算する。
  12. alignに'xMax'が含まれていれば、(e-width - vb-width * scale-x)をtranslate-xへ加算する。
  13. alignに'yMid'が含まれていれば、(e-height - vb-height * scale-y) / 2をtranslate-yへ加算する。
  14. alignに'yMax'が含まれていれば、(e-height - vb-height * scale-y)をtranslate-yへ加算する。

要素内コンテンツに適用される変換は translate(translate-x, translate-y) scale(scale-x, scale-y) です。

8.3. 初期ビューポート

初期ビューポートの幅は、widthプレゼンテーション属性の値が最外svg要素に指定されている場合はその値となります。ただし、以下の条件を全て満たす場合は除きます：

これらの条件下では、ビューポート幅は位置指定プロパティにより決定しなければなりません。

同様に、参照要素または最外svg要素に 位置指定プロパティ が十分に指定されていてビューポート高さを確定できる場合は、これらの位置指定プロパティで高さを決定しなければなりません。そうでなければ、初期ビューポートの高さはheightプレゼンテーション属性の値となります。

widthやheightプレゼンテーション属性が最外svg要素にユーザー単位（単位指定なし）で指定されている場合は、その値は「px」単位と同等とみなされます（単位参照）。

次の例では、SVGグラフィックが親XML文書内にインラインで埋め込まれており、CSSレイアウトルールで整形されています。最外svg要素にCSS位置指定プロパティが指定されていないため、width="100px"とheight="200px"属性が初期ビューポートのサイズを決定します： 

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">

   <!-- SVG graphic -->
   <svg xmlns='http://www.w3.org/2000/svg'
      width="100px" height="200px">
      <path d="M100,100 Q200,400,300,100"/>
      <!-- rest of SVG graphic would go here -->
   </svg>

</parent>

8.4. 初期座標系

最外svg要素に対して、SVGユーザーエージェントは初期ビューポート座標系と初期ユーザー座標系を決定しなければなりません。この両座標系は一致している必要があります。両座標系の原点はSVGビューポートの原点となり、初期座標系の1単位はSVGビューポート内の CSS 2.1 px ([CSS2] 4.3.2節)と等しくなります。 スタンドアロンSVG文書や、CSS [CSS2]でレイアウトされる親文書内に参照またはインライン埋め込みされたSVG文書断片では、初期ビューポート座標系（および初期ユーザー座標系）は、原点がビューポートの左上、x軸が右向き、y軸が下向き、テキストは「立て書き」方向（ローマ字や全角漢字などのグリフの上端が上、右端が右になるよう配置）となります。

SVG実装がCSS 2.1互換のpx単位による文書スタイリングをサポートするユーザーエージェントの一部である場合、SVGユーザーエージェントはpx単位の実世界サイズの初期値を他のスタイリング操作で使われる値と一致させるべきです。そうでない場合、ユーザーエージェントが環境からpx単位のサイズを決定できればそれを使い、できない場合は適切なサイズを選ぶべきです。いずれの場合も、px単位のサイズはCSS 2.1で説明される規則 ([CSS2] 4.3.2節)に準拠しなければなりません。

例 InitialCoordsは、初期座標系の原点が左上で、x軸が右向き、y軸が下向きであることを示しています。初期ユーザー座標系の1ユーザー単位は、親（明示的または暗黙的）ユーザーエージェントの「ピクセル」と等しくなります。 

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>例 InitialCoords - SVGの初期座標系</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>
例 InitialCoords — SVGの初期座標系

例 InitialCoords

この例をSVGとして表示（SVG対応ブラウザのみ）

8.5. ‘transform’プロパティ

ユーザーエージェントは、[css-transforms-1]で定義される transformプロパティおよびプレゼンテーション属性をサポートしなければなりません。

8.6. ‘viewBox’属性

名前 値 初期値 アニメーション可能
viewBox [<min-x>,? <min-y>,? <width>,? <height>] 未指定と同様 はい 
<min-x>, <min-y>, <width>, <height> = <number>

‘svg’要素上のtransformは ‘viewBox’属性のため特別な扱いとなります。 transformは、あたかも‘svg’要素がそのtransformを持つ親要素を持っているかのように適用されるべきです。

決議: transformプロパティは概念的に'svg'要素の外側に適用され、プレゼンテーション属性とスタイルプロパティの間に視覚的結果の違いはありません。

‘viewBox’属性は、 ‘preserveAspectRatio’属性と組み合わせて、 SVGビューポートを特定のコンテナ要素に合わせて伸縮する機能を提供します。

‘viewBox’属性の値は、4つの数値 <min-x>、<min-y>、<width>、<height> のリストで、空白またはカンマで区切られます。これらはユーザー空間の矩形を指定し、指定された要素で確立されたSVGビューポートの境界にマッピングされます（ ‘preserveAspectRatio’ 属性を考慮）。‘viewBox’属性を指定すると、 SVGビューポートの等価変換の計算で記載されているように ビューポート座標系に変換が適用されます。

<width>または <height>に負の値を指定するとエラーとなり、 ‘viewBox’属性は無効になります。ゼロ値の場合は要素の描画が無効化されます。

例 ViewBoxは、 最外svg要素上の‘viewBox’属性によって、 SVGコンテンツがSVGビューポートの境界に合わせて伸縮する例です。 

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>例 ViewBox - viewBox属性を使い、
   初期ユーザー座標系を自動的に作成し、グラフィックが
   SVGビューポートのサイズに関わらずフィットするようにスケールします。</desc>
  <!-- この矩形はユーザー座標系の(0,0)から(1500,1000)までです。
       上記viewBox属性により、この矩形はSVGコンテンツ用に確保された全領域を埋めることになります。 -->
  <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- 大きな赤い三角形 -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- SVGビューポートのほとんどを覆うテキスト -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>
例 ViewBox
SVGビューポート（幅=300px,
高さ=200px）で描画		 SVGビューポート（幅=150px,
高さ=200px）で描画
例 ViewBox - 300×200にフィット 例 ViewBox - 150×200にフィット

この例をSVGとして表示（SVG対応ブラウザのみ）

‘viewBox’ 属性の効果は、ユーザーエージェントが指定されたユーザー座標系内の矩形を指定領域（多くの場合SVGビューポート）にマッピングするための適切な変換行列を自動的に適用することです。左側の例（SVGビューポート300×200ピクセル）の場合、ユーザーエージェントはX・Y両方を0.2でスケールする変換を自動挿入する必要があります。これは、300px×200pxのSVGビューポートと次の補助変換が文書にあるのと同等です： 

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.2)">
    <!-- 本文書の残り -->
  </g>
</svg>

右側の例（SVGビューポート150×200ピクセル）の場合は、Xを0.1、Yを0.2でスケールする変換を自動挿入する必要があります。これは、150px×200pxのSVGビューポートと次の補助変換があるのと同等です： 

<?xml version="1.0" standalone="no"?>
<svg width="150px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.1 0.2)">
    <!-- 本文書の残り -->
  </g>
</svg>

場合によっては、ユーザーエージェントがscale変換に加えてtranslate変換も適用する必要があります。例えば、 最外svg要素上で ‘viewBox’属性の <min-x>や<min-y>にゼロ以外の値が指定された場合は、 translate変換が必要となります。

両方のtransform（または‘patternTransform’）と ‘viewBox’が要素に適用される場合、2つの新しい座標系が確立されます。 transformが最初の新しい座標系を確立し、 ‘viewBox’がすべての子孫要素に対する2つ目の座標系を確立します。 最初の座標系は2つ目の座標系で後置乗算されます。

transformプロパティとは異なり、 ‘viewBox’による自動変換は、 要素上の‘x’、‘y’、‘width’、‘height’属性（ ‘marker’要素の場合は ‘markerWidth’および ‘markerHeight’属性）には影響しません。 したがって、上記例で示したように、 ‘svg’要素が widthとheightプレゼンテーション属性、 ‘viewBox’属性を持つ場合、 widthとheightは ‘viewBox’変換が適用される前の座標系での値となります。一方、transformプロパティと同様に、 他の属性や子孫要素に対しては新しい座標系が確立されます。

8.7. ‘preserveAspectRatio’ 属性

名前 値 初期値 アニメーション可能
preserveAspectRatio <align> <meetOrSlice>? xMidYMid meet はい 
<align> =
    none
    | xMinYMin | xMidYMin | xMaxYMin
    | xMinYMid | xMidYMid | xMaxYMid
    | xMinYMax | xMidYMax | xMaxYMax
<meetOrSlice> = meet | slice

均一な拡大縮小を強制するかどうかを示します。新しいSVGビューポートを確立するすべての要素（SVGビューポートを確立する要素参照）、および ‘image’、 ‘marker’、 ‘pattern’ 、 ‘view’ 要素に適用されます

場合によっては、通常 ‘viewBox’属性を使用する際に、 グラフィック全体をSVGビューポート全体に非均一にフィットさせることが望ましいことがあります。他の場合には、グラフィックのアスペクト比を保持するために均一な拡大縮小を使用することが望ましいことがあります。

新しいSVGビューポートを確立する要素（SVGビューポートを確立する要素参照）、 および ‘marker’、 ‘pattern’、 ‘view’要素については、 同じ要素に‘viewBox’属性の値が指定されている場合のみ ‘preserveAspectRatio’が適用されます。これらの要素で ‘viewBox’属性が指定されていない場合は ‘preserveAspectRatio’は無視されます。

‘image’要素については、 ‘preserveAspectRatio’属性は 参照画像を基準矩形にどのようにフィットさせるか、および参照画像のアスペクト比を現在のユーザー座標系で保持するかどうかを示します。

<align>パラメータは、 均一な拡大縮小を強制するかどうか、強制する場合はSVGビューポートのアスペクト比と‘viewBox’のアスペクト比が一致しない場合の整列方式を示します。<align>パラメータは以下のいずれかの文字列でなければなりません：

<meetOrSlice> パラメータはオプションであり、指定する場合は<align>値の後に1つ以上の空白で区切り、以下のいずれかの文字列でなければなりません：

例 PreserveAspectRatio は‘preserveAspectRatio’の様々なオプションを示しています。 この例では 最外svg要素内に ‘svg’サブ要素を埋め込むことで 複数の新しいSVGビューポートを作成しています（新しいSVGビューポートの確立参照）。 

<svg width="450px" height="300px" xmlns="http://www.w3.org/2000/svg">

  <desc>例 PreserveAspectRatio - preserveAspectRatio属性の例</desc>

  <style type="text/css">
    text { font-size: 9; }
    rect { fill: none; stroke: blue; }
  </style>

  <defs>
    <g id="smile">
      <rect x='.5' y='.5' width='29' height='39' style="fill:black;stroke:red"/>
      <circle cx='15' cy='20' r='10'  fill='yellow'/>
      <circle cx='12' cy='17' r='1.5' fill='black'/>
      <circle cx='17' cy='17' r='1.5' fill='black'/>
      <path d='M 10 24 A 8 8 0 0 0 20 24' stroke='black' stroke-width='2'/>
    </g>
  </defs>

  <rect x="1" y="1" width="448" height="298"/>

  <text x="10" y="30">SVGをフィット</text>
  <g transform="translate(20,40)"><use href="#smile" /></g>

  <text x="10" y="110">ビューポート 1</text>
  <g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29'/></g>

  <text x="10" y="180">ビューポート 2</text>
  <g transform="translate(20,190)"><rect x='.5' y='.5' width='29' height='59'/></g>

  <g id="meet-group-1" transform="translate(100, 60)">
    <text x="0" y="-30">--------------- meet ---------------</text>
    <g>
      <text y="-10">xMin*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text y="-10">xMid*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(0,70)">
      <text y="-10">xMax*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30">
        <use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="meet-group-2" transform="translate(250, 60)">
    <text x="0" y="-30">---------- meet ----------</text>
    <g>
      <text y="-10">*YMin</text>
      <rect  x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(50, 0)">
      <text y="-10">*YMid</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(100, 0)">
      <text y="-10">*YMax</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="slice-group-1" transform="translate(100, 220)">
    <text x="0" y="-30">---------- slice ----------</text>
    <g>
      <text y="-10">xMin*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(50,0)">
      <text y="-10">xMid*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(100,0)">
      <text y="-10">xMax*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="slice-group-2" transform="translate(250, 220)">
    <text x="0" y="-30">--------------- slice ---------------</text>
    <g>
      <text y="-10">*YMin</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
           width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text y="-10">*YMid</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text y="-10">*YMax</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
  </g>
</svg>
例 PreserveAspectRatio — 選択可能なオプションの説明

例 PreserveAspectRatio

8.8. 新しいSVGビューポートの確立

SVGコンテンツ内に‘svg’要素を含めると、 その中に含まれるすべてのグラフィックが描画される新しいSVGビューポートが作成されます。 これにより暗黙的に新しいビューポート座標系と新しいユーザー座標系が確立されます。 また、新しいSVGビューポートが確立されることで、パーセンテージ単位の意味も新しくなります （単位参照）。

新しいSVGビューポートの境界は、そのビューポートを確立する要素（例えば‘svg’要素）の ‘x’、‘y’、 ‘width’、‘height’属性によって定義されます。 新しいビューポート座標系と新しいユーザー座標系の原点は (‘x’, ‘y’) となり、 ‘x’と‘y’は SVGビューポートを確立する要素の属性値です。 新しいビューポート座標系と新しいユーザー座標系の向きは、 SVGビューポートを確立する要素の現在のユーザー座標系の向きに一致します。 新しいビューポート座標系と新しいユーザー座標系の1単位は、 SVGビューポートを確立する要素の現在のユーザー座標系の1単位と同じ大きさです。

例：

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>このSVG描画は別のSVGを埋め込みます、
    これによって新しいSVGビューポートが確立されます
  </desc>
  <!-- 次の記述で新しいSVGビューポートを確立し、
       SVG描画BをそのSVGビューポートに描画します -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- 描画Bはここ -->
  </svg>
</svg>

新しいSVGビューポート作成のより詳しい例は 例 PreserveAspectRatioを参照してください。

以下の要素が新しいSVGビューポートを確立します：

歴史的な理由で、 ‘pattern’要素や ‘marker’要素は、 ‘viewBox’属性を受け付けますが、 新しいビューポートは作成しません。 ‘clipPath’要素や ‘mask’要素も同様です。 これらの要素内のコンテンツでのパーセンテージ長さは、グラフィカル効果領域の寸法に比例しません。

‘foreignObject’要素は、 子コンテンツ用に新しい CSS包含ブロックを確立します。 ‘video’、 ‘audio’、 ‘canvas’要素も、 フォールバックコンテンツが描画される場合は同様です。 これは新しいビューポートに似た効果があり、 子コンテンツのレイアウトのスコープをリセットします。 ただし、‘foreignObject’の子孫としてSVG要素を描画するには、 新しい‘svg’要素で SVG文書断片とSVGビューポートを確立する必要があります。

‘image’要素や ‘iframe’要素は、 参照先文書用の新しい 文書ビューポートを作成します。 参照先がSVGファイルの場合、当然その中でも自身のSVGビューポートが確立されます。

新しいSVGビューポートが新たなクリッピングパスも確立するかどうかは、 そのビューポートを確立する要素のoverflowプロパティの値によって決まります。

8.9. 単位

SVGは、CSS値と単位モジュール [css-values]で定義される一般的な値と単位の説明に従い、 属性・プレゼンテーション属性・CSSプロパティに適用します。各属性やプロパティは使用する値型を指定しなければなりません。 CSS WGやSVG WGが公開する後続・拡張仕様は、基本データ型を拡張したり新しいデータ型を追加したりする場合があります。

<percentage>値がSVGビューポートのサイズに対して相対的に定義されている場合：

例 Unitsは さまざまな単位種別の処理規則の一部を示します。

<?xml version="1.0" standalone="no"?>
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <title>例 Units</title>
  <desc>さまざまな単位オプションの例</desc>

  <!-- 図を枠で囲む -->
  <rect x="5" y="5" width="3990" height="1990"
        fill="none" stroke="blue" stroke-width="10"/>

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- 絶対単位指定 -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">絶対単位:</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
      </g>
    </g>

    <!-- 相対単位指定 -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">相対単位:</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
      </g>
    </g>

    <!-- パーセンテージ -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">パーセンテージ:</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
      </g>
    </g>
  </g>
</svg>
例 Units — 選択可能なオプションの説明

例 Units

左側の3つの矩形は絶対単位識別子「in」（インチ）の使用例です。CSSでは1インチは96ピクセルに等しいと定義されています。そのため、最上段の矩形（インチ単位指定）は、中段の矩形（ユーザー単位で指定され、最上段と同じ寸法になるように1インチ=96ユーザー単位で指定）と全く同じサイズになります。下段の矩形はインチ指定値をスケールした場合の挙動を示します。

中央の3つの矩形は相対単位識別子「em」の使用例です。最外‘g’要素にfont-sizeプロパティが150で設定されているため、1em=150ユーザー単位となります。最上段の矩形（em単位指定）は中段の矩形（ユーザー単位指定で最上段と同じ寸法になるように150ユーザー単位=1emで指定）と全く同じサイズです。下段の矩形はem指定値をスケールした場合の挙動を示します。

右側の3つの矩形はパーセンテージ単位の使用例です。SVGビューポートのユーザー座標系（この例では最外‘svg’要素）の幅・高さは ‘viewBox’属性の処理によって 4000と2000に変換されます。最上段の矩形（パーセンテージ単位指定）は中段の矩形（同等のユーザー単位指定）と全く同じサイズです。特に、中段の矩形のstroke-widthプロパティは sqrt((actual-width)**2 + (actual-height)**2) / sqrt(2)の1%、 この場合は.01*sqrt(4000*4000+2000*2000)/sqrt(2)=31.62となります。下段の矩形はパーセンテージ指定値をスケールした場合の挙動です。

8.10. バウンディングボックス

バウンディングボックス

要素のバウンディングボックス（または "bbox"）は、その要素のユーザー座標系の軸に揃えた最もぴったり収まる矩形で、要素自身とその子孫をすべて完全に囲みます。

要素について計算できるバウンディングボックスには3種類あります：

  1. オブジェクトバウンディングボックスは、 要素の幾何学的形状のみを含むバウンディングボックスです。 基本図形の場合、これは塗りつぶされる領域です。 特に指定がない限り、「バウンディングボックス」とはこれを指します。
  2. ストロークバウンディングボックスは、 要素の幾何学的形状とストローク形状の両方を含むバウンディングボックスです。
  3. 装飾バウンディングボックスは、 要素の幾何学的形状、ストローク形状、およびマーカーのすべてを含むバウンディングボックスです。

要素のopacity、visibility、fill、 fill-opacity、fill-rule、stroke-dasharray 、stroke-dashoffsetプロパティは、 バウンディングボックスには影響しません。

曲線図形の場合、バウンディングボックスは曲線端点だけでなく、曲線の縁に沿ったすべての部分を囲む必要があります。 たとえば、キュービックベジェ命令の2番目の座標ペアのように、曲線上にない制御点はバウンディングボックスの寸法に寄与してはなりません （ただし、それらの点が図形自身または曲線上・近傍に位置する場合は、バウンディングボックス内に含まれることがあります）。 例えば、曲線端から離れた側にある制御点は、バウンディングボックスに含めてはなりません。

二次ベジェ曲線のオブジェクトバウンディングボックスの画像。

パス 'M20,50 L35,100 H120 V50 Q70,10 20,50' は薄い青色で表示されています。左側はパスの正しいオブジェクトバウンディングボックスです。 曲線の最上部制御点は含まれませんが、すべての青い図形部分（制御点の凸包外も含む）はバウンディングボックスに含まれます。

要素がレンダリングツリーに属していなくても （'display: none'、‘defs’要素内、 ‘symbol’要素のように通常レンダリングされない場合や、 文書ツリー内に存在しない場合など）、 バウンディングボックスは持ちます。 getBBoxで取得した場合、 要素がレンダリングされている場合と同じ矩形になります。 ただし、レンダリングツリーに属していない要素は、祖先要素のバウンディングボックスには寄与しません。

以下の例は複数の要素を定義しています。ID付き要素ごとの期待される オブジェクトバウンディングボックスを下記に示します。 

<svg xmlns="http://www.w3.org/2000/svg">

  <title>バウンディングボックス計算</title>
  <desc>文脈によって異なるバウンディングボックス結果を持つ要素例</desc>

  <defs id="defs-1">
     <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
  </defs>

  <g id="group-1">
    <use id="use-1" href="#rect-1" x="10" y="10" />

    <g id="group-2" display="none">
      <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
    </g>
  </g>
</svg>
要素ID バウンディングボックスの結果
"defs-1" {0, 0, 0, 0}
"rect-1" {20, 20, 40, 40}
"group-1" {30, 30, 40, 40}
"use-1" {30, 30, 40, 40}
"group-2" {10, 10, 100, 100}
"rect-2" {10, 10, 100, 100}

テキストコンテンツ要素の場合、バウンディングボックス計算では各グリフを個別のグラフィック要素として扱う必要があります。 計算ではすべてのグリフがフルグリフセルを占有すると仮定しなければなりません。 フルグリフセルは、 横書きテキストの場合は横方向のアドバンスとEMボックスの高さを持ちます。 縦書きテキストを横倒しで組版する場合は、EMボックスの幅と横方向アドバンスの高さを持ちます。 その他の縦書きテキストでは、EMボックスの幅と縦方向アドバンスの高さ（縦方向アドバンスがフォントで定義されていない場合はEMボックスの高さ）となります。 例えば、横書きテキストの場合は、各グリフがフォントの全アセント・ディセント値まで垂直方向に広がると仮定します。

宣言的またはスクリプトによるアニメーションで要素の形状・サイズ・位置が変化するため、バウンディングボックスは可変です。 したがって、バウンディングボックスはスクリプト呼び出しや宣言的・リンク構文の一部として要求された時点での要素の現在値を反映します。

幅ゼロ、高さゼロ、またはその両方の要素 （垂直/水平線や‘rect’要素で幅・高さがゼロの場合など）も、 プラスの寸法があればその値、なければ幅・高さの両方が'0'のバウンディングボックスを持ちます。 同様に、‘path’要素のサブパスで幅・高さがゼロの区間も、 バウンディングボックス計算のためにはその要素の形状に含める必要があります。

位置指定のない要素（‘path’要素でdプロパティ値がnoneの場合など）は、 バウンディングボックス計算上は(0,0)に配置されたものとみなします。

DOMオブジェクトがSVGGraphicsElementから派生していない要素（グラデーション要素など）は バウンディングボックスを持たず、バウンディングボックス要求のためのインターフェースもありません。

レンダリングツリー内で未解決リソースを参照している要素も、 属性で指定された位置・寸法、または値未指定の場合は初期値により バウンディングボックスを持ちます。例えば <use href="#bad" x="10" y="10"/> は x=10, y=10, 幅・高さ=0のバウンディングボックスを持ちます。

次のアルゴリズムは要素のバウンディングボックスの計算方法を定義します。アルゴリズムへの入力は以下です：

バウンディングボックスを計算するアルゴリズムは、elementの型によって以下の通りです：

図形
テキスト内容要素
‘a’ 要素（テキスト内容要素内）
  1. boxを(0, 0, 0, 0)で初期化。
  2. fill-shapeを、elementが図形なら等価パス、 そうでなければテキスト内の各グリフセルを含む形状とする。
  3. fillがtrueなら、boxを座標系spaceでfill-shapeを最もぴったり囲む矩形に設定。

    fill、 fill-opacity、 fill-ruleプロパティ値はfill-shapeに影響しません。

  4. strokeがtrueで、要素のstrokeがnoneでない場合、 boxをboxと、座標系spaceで要素のストローク形状をぴったり囲む矩形の和集合に設定 （ダッシュパターンはないものとする）。

    stroke-opacity、 stroke-dasharray、 stroke-dashoffset プロパティ値はストローク形状計算に影響しません。

  5. markersがtrueなら、要素に描画される各マーカーmarkerについて：
    1. markerのコンテンツを定義する‘marker’要素の 各子孫グラフィック要素childについて：
      1. childが‘marker’内の祖先要素に 'display: none'や条件付き処理属性、または ‘a’、 ‘g’、 ‘svg’、 ‘switch’以外の要素があれば、 次の子孫グラフィック要素へcontinue。
      2. それ以外の場合、boxをboxと、アルゴリズムを呼び出してchildをelement、 spaceを座標空間、fill・stroke・markersをすべてtrue、 clippedをそのまま渡して得られる結果の和集合に設定。
  6. clippedがtrueで、elementのclip-path値がnoneでない場合、 boxをboxとクリッピングパスの交差部分を座標系spaceでぴったり囲む矩形に設定。
  7. boxを返す。
コンテナ要素
‘use’
  1. boxを(0, 0, 0, 0)で初期化。
  2. parentを、コンテナ要素ならそれ、そうでなければ‘use’要素のシャドウツリーのルートとする。
  3. parentの各子孫グラフィック要素childについて：
    1. childがレンダリングされない場合、 次の子孫グラフィック要素へcontinue。
    2. それ以外の場合、boxをboxと、アルゴリズム呼び出しでchildをelement、 space・fill・stroke・markers・clippedは入力値そのままの結果の和集合に設定。
  4. clippedがtrueの場合：
    • elementのclip-path値がnoneでない場合、 boxをboxとクリッピングパスの交差部分を座標系spaceでぴったり囲む矩形に設定。
    • elementにoverflowプロパティが適用され、 その値がvisibleでない場合、 boxをboxと要素のoverflow境界の交差部分を座標系spaceでぴったり囲む矩形に設定。
    • elementにclipプロパティが適用され、 その値がautoでない場合、 boxをboxとclipで指定された矩形の交差部分を座標系spaceでぴったり囲む矩形に設定。
  5. box を返す。
‘canvas’
‘foreignObject’
‘iframe’
‘image’
‘video’
  1. box を、要素の ‘x’, ‘y’, ‘width’, ‘height’ の幾何プロパティによって定義される 配置矩形 を含む、座標空間 space の最も狭い矩形とする。

    このアルゴリズムへの fill, stroke, markers の入力引数は、これらの要素に対して返されるバウンディングボックスには影響しません。

  2. clipped が true で、element の clip-path の値が none でない場合は、box を、 box とクリッピングパスの交差部分を含む座標系 space の最も狭い矩形とする。
  3. box を返す。

値 (0, 0, 0, 0) の box と空の形状との和集合は box である。

要素の オブジェクトバウンディングボックス、 ストロークバウンディングボックス、 または 装飾バウンディングボックス は、 上記のバウンディングボックス計算アルゴリズムを次の引数で呼び出した結果である： element は要素自身、 space はその要素のユーザー座標系、 fill は true、 stroke は ストロークバウンディングボックス または 装飾バウンディングボックス を計算する場合は true、それ以外の場合は false、 markers は 装飾バウンディングボックス を計算する場合は true、それ以外の場合は false、 clipped は false。

8.11. オブジェクトバウンディングボックス単位

以下の要素は、指定された属性をその要素に'objectBoundingBox'と設定することで、座標値や長さをオブジェクトバウンディングボックスの分数（場合によってはパーセンテージ）で表現することができます：

要素 属性 効果
‘linearGradient’ ‘gradientUnits’ グラデーションベクトルを指定する属性 (‘x1’, ‘y1’, ‘x2’, ‘y2’) が、グラデーションが適用される要素のバウンディングボックスの分数またはパーセンテージを表すことを示します。
‘radialGradient’ ‘gradientUnits’ 中心 (‘cx’, ‘cy’)、半径 (‘r’)、フォーカス (‘fx’, ‘fy’) を、グラデーションが適用される要素のバウンディングボックスの分数またはパーセンテージで表すことを示します。
‘pattern’ ‘patternUnits’ パターンのタイル方法を定義する属性 (‘x’, ‘y’, ‘width’, ‘height’) が、パターンが適用される要素のバウンディングボックスを基準に決定されることを示します。
‘pattern’ ‘patternContentUnits’ パターンの内容のユーザー座標系が、パターンが適用される要素のバウンディングボックスを基準に設定されることを示します。
‘clipPath’ ‘clipPathUnits’ ‘clipPath’要素の内容のユーザー座標系が、クリッピングパスが適用される要素のバウンディングボックスを基準に設定されることを示します。
‘mask’ ‘maskUnits’ マスク領域を定義する属性 (‘x’, ‘y’, ‘width’, ‘height’) が、マスクが適用される要素のバウンディングボックスを基準に設定されることを示します。
‘mask’ ‘maskContentUnits’ ‘mask’要素の内容のユーザー座標系が、マスクが適用される要素のバウンディングボックスを基準に設定されることを示します。
‘filter’ ‘filterUnits’ フィルター効果領域 (‘x’, ‘y’, ‘width’, ‘height’) を、フィルターが適用される要素のバウンディングボックスの分数またはパーセンテージとして表すことを示します。
‘filter’ ‘primitiveUnits’ フィルタープリミティブ内の様々な長さの値が、フィルターが適用される要素のバウンディングボックスの分数またはパーセンテージで表されることを示します。

以下の説明では、適用要素とは効果が適用される要素を指します。グラデーションやパターンの場合、適用要素はグラフィックス要素であり、そのfillまたはstrokeプロパティが該当グラデーションやパターンを参照しています（テキスト要素に関する特別なルールについては、オブジェクトバウンディングボックス単位とテキスト要素を参照）。クリッピングパス、マスク、フィルターについては、適用要素はコンテナ要素またはグラフィックス要素となり得ます。

キーワードobjectBoundingBoxが使われる場合、入れ子の変換行列リストに補助的な変換行列が挿入され、新たなユーザー座標系が生成される効果が得られます。

まず、(minx,miny)と(maxx,maxy)座標は、適用要素のオブジェクトバウンディングボックスの範囲によって決定されます。

次に、新しいユーザー座標系の(0,0)が適用要素のユーザー座標系内のバウンディングボックスの(minx,miny)隅に、 (1,1)がバウンディングボックスの(maxx,maxy)隅にマッピングされます。多くの場合、以下の変換行列が正しい効果を生みます：

[ (maxx-minx) 0 0 (maxy-miny) minx miny ]

グラデーションベクトル、パターンタイル、フィルター領域、マスク領域を定義する属性にパーセンテージを使用した場合、パーセンテージは対応する小数値と同じ値を表します（例：50%は0.5と同じ意味）。‘pattern’、 ‘clipPath’、 ‘mask’、 ‘filter’要素の内容内でパーセンテージが使われた場合は、単位で定義されたパーセンテージの処理規則に従います。

オブジェクトバウンディングボックス単位として分数やパーセンテージで表現する値には任意の数値を指定できます。特に、0未満や1より大きい分数、0%未満や100%以上のパーセンテージも指定可能です。

キーワードobjectBoundingBoxは、適用要素のジオメトリーが幅または高さを持たない場合（例えば水平線や垂直線など）には使用すべきではありません。線に実際の太さ（非ゼロのストローク幅）があっても、ストローク幅はバウンディングボックスの計算では無視されるためです。適用要素のジオメトリーが幅または高さを持たず、objectBoundingBoxが指定された場合、該当する効果（例：グラデーションやフィルター）は無視されます。

8.12. SVGコンテンツの固有サイズプロパティ

CSSで整形されたホスト文書にSVGを含めるためには、具体的オブジェクトサイズを算出する必要があります。 具体的オブジェクトサイズはCSS Images 3 [css-images-3]で定義される デフォルトサイズ付けアルゴリズム を用いて、次の入力値で算出しなければなりません。

指定サイズは、‘svg’要素のwidthおよびheightサイズプロパティの使用値から決定しなければなりません。

固有寸法もwidthおよびheightサイズプロパティから決定されます。widthまたはheightが指定されていない場合、使用値は初期値'auto'となります。 'auto'やパーセンテージ長は固有幅や固有高さの決定には使用できません。

ビットマップ画像形式では、固有寸法は画像ファイル内で固定され、 指定サイズはホスト文書で画像を拡大縮小するために定義されます。 SVGは本質的にスケーラブルなので、固有幅と 固有高さは指定サイズの幅と高さに適合します。 よって、長さとして指定された場合、‘svg’要素のwidthとheightサイズプロパティはSVG画像の固有寸法と、ホスト文書にSVG画像を配置する際の指定サイズを制御します。

固有アスペクト比は、次のアルゴリズムで算出します。アルゴリズムがnullを返す場合、固有アスペクト比はありません。

  1. ‘svg’要素のwidthとheightサイズプロパティが両方とも絶対値の場合：
    1. width / height を返す
  2. SVGビューがアクティブな場合：
    1. viewboxをアクティブなSVGビューで定義されたviewboxとする
    2. viewbox.width / viewbox.height を返す
  3. ‘svg’要素上の‘viewBox’が正しく指定されている場合：
    1. viewboxを‘svg’要素上の‘viewBox’属性で定義されたviewboxとする
    2. viewbox.width / viewbox.height を返す
  4. null を返す

この節で定義される挙動はCSS固有ですが、他のホスト環境にも適用可能です。すべてのホスト環境で、固有アスペクト比が利用可能な場合は、SVGビューポートのサイズ決定時に尊重しなければなりません。

例：

例： 固有アスペクト比 1 
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm">
  ...
</svg>

この例では、SVGビューポートの固有アスペクト比は2:1です。 固有幅は10cm、固有高さは5cmです。

例： 固有アスペクト比 2 
<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="50%" viewBox="0 0 200 200">
  ...
</svg>

この例では、最外部SVGビューポートの固有アスペクト比は1:1です。 この場合のアスペクト比計算により、片方向のみ制約のある包含ブロック内のオブジェクトへの埋め込みが可能となります。

例： 固有アスペクト比 3 
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" viewBox="0 0 200 200">
  ...
</svg>

この場合、固有アスペクト比は1:1です。

例： 固有アスペクト比 4 
<svg xmlns="http://www.w3.org/2000/svg"
     width="75%" height="10cm" viewBox="0 0 200 200">
  ...
</svg>

この例では、固有アスペクト比は1:1です。

新しいauto値の例をもっと追加すべきか？例えばDavid Vestが提供した 例 など。

8.13. ベクター効果

SVG 2 要件: SVG 2はSVG 1.2 Tinyを元に制約付き変換を持つ。
決議: ベクター効果拡張提案をSVG 2仕様に追加。
目的: 非スケーリング機能（オブジェクトの一部非スケーリング、オブジェクト全体非スケーリング）を含めるため。
担当者: Satoru Takagi (ACTION-3619)

オブジェクトのアウトラインを元の幅のまま保持したり、オブジェクトの位置を変換に関わらず固定したい場合があります。例えば、地図上の道路を2px幅の線で描画する場合、ユーザーが地図をズームしても道路を2px幅に保つことや、グラフのイントロノートでパンが可能な場合などです。

このような座標変換やグラフィック描画に関する効果を提供するため、SVG Tiny 1.2ではvector-effectプロパティが導入されました。 SVG Tiny 1.2では非スケーリングストロークのみが導入されましたが、このバージョンではさらに多くの効果が追加されています。さらに、これらの効果は組み合わせて指定でき、より多様な効果を表現できます。また、SVG言語の将来バージョンではこのプロパティを通じてより強力なベクター効果指定が可能となります。

vector-effectの値のうち、non-scaling-strokeとnone以外は実装不足のためSVG 2から削除の危険があります。 実装者からのフィードバック（現仕様での実装可能性について）が実装期間中に求められています。

名前: vector-effect
値: none | [ non-scaling-stroke | non-scaling-size | non-rotation | fixed-position ]+ [ viewport | screen ]?
初期値: none
適用対象: グラフィックス要素および‘use’
継承: いいえ
パーセンテージ: N/A
メディア: 視覚
算出値: 指定通り
アニメーション可能: はい
none
ベクター効果は適用されません。すなわちSVG 1.1からのデフォルト描画動作が使われ、まず図形のジオメトリーが指定ペイントで塗りつぶされ、次にアウトラインが指定ペイントでストロークされます。
non-scaling-stroke
ペインティングにおけるベクター効果の説明を参照してください。
non-scaling-size
この要素および子孫に対して特別なユーザー座標系を制約付き変換で指定します。次の特徴があります。ユーザー座標系のスケールは、ホスト座標空間のCTMが変化しても変化しません。ただし、回転と傾斜の抑制は指定しません。また、ユーザー座標系の配置固定も指定しません。non-scaling-sizeはユーザー座標系のスケーリング抑制を行うため、non-scaling-strokeの特性も持ちます。変換式と例は次章で示します。
non-rotation
この要素および子孫に対して特別なユーザー座標系を制約付き変換で指定します。次の特徴があります。ユーザー座標系の回転と傾斜は、ホスト座標空間のCTMが変化しても抑制されます。ただし、スケーリングの抑制は指定しません。また、ユーザー座標系の配置固定も指定しません。変換式と例は次章で示します。
fixed-position
この要素および子孫に対して特別なユーザー座標系を制約付き変換で指定します。次の特徴があります。ユーザー座標系の配置は、ホスト座標空間のCTMが変化しても固定されます。ただし、回転・傾斜・スケーリングの抑制は指定しません。fixed-position効果を持つ要素がtransformプロパティも持つ場合、そのプロパティは本効果のために消費されます。transformプロパティの行列のシフト成分eとfは固定ユーザー座標系の原点移動に利用されます。変換式と例は次章で示します。

これらの値は列挙可能であり、これらの特徴を同時に持つ効果を指定できます。

次の2つの値は、上記の値を補助します。これらは制約付き変換のホスト座標空間を示します。特に、入れ子コンテンツや入れ子‘svg’要素など、入れ子ビューポート座標系に属する要素に効果的です。未指定時の初期値はviewportです。

viewport
直近のビューポート座標系をホスト座標空間とします。要素が入れ子のビューポート座標系に属している場合、ベクター効果はその要素が直接属するビューポート座標系に適用されます。すなわち、ベクター効果は祖先ビューポート座標系のCTM変化には効果がありません。
screen
内容の座標系を、ユーザーエージェントが直接制御する座標系とします。いわばユーザーエージェントが持つ「画面」です（SVGT1.2の"screen coordinate space"）。その要素が入れ子ビューポート座標系に属していても、ベクター効果はあらゆる階層のCTM変化に常に有効です。SVG実装がCSS互換px単位をサポートするユーザーエージェントの一部である場合、これはルートコンテンツのCSSピクセル上の座標系です。一般的に、デバイスのピクセル（またはドット）とCSSのピクセルは、ユーザーエージェント自身のズーム機能やdpiの違いによって必ずしも一致しません（resolution [CSS Values and Units Module Level 3]参照）。 したがって、この値はデバイス座標系への制約付き変換を指定しません。

注：SVGの将来バージョンではデバイス座標系指定方法が追加される可能性があります。

8.13.1. ベクター効果の計算

この節では、ベクター効果の挙動を明確化するため、non-scaling-stroke（明確な意味を持つもの）を除く値の組み合わせに関する変換式一覧を示します。

vector-effectプロパティは、3dレンダリングコンテキストで実行される変換には影響しません。

通常のユーザー座標系からビューポート座標系への座標変換式は以下の通りです。

x viewport y viewport 1 = CTM ⋅ x userspace y userspace 1 CTM = a ctm c ctm e ctm b ctm d ctm f ctm 0 0 1 
<circle vector-effect="veValue" transform="translate(xo yo)" cx="xf" cy="yf" r=".."/>

上記のようにvector-effectを要素に追加すると、ユーザー座標からデバイス座標への変換式が以下のように変化します。ここでxfとyfは対応する要素およびその子孫のユーザー座標です。また、xoとyoは当該要素のtransform属性の行列要素eとfです。さらに、|det(CTM)|はCTMの行列式の絶対値です。この値が0となりnon-scaling-sizeが指定された場合、vector-effectは無効、すなわちnoneとなります。

det CTM = a ctm ⋅ d ctm - b ctm ⋅ c ctm
veValue 式
non-scaling-size
x viewport y viewport 1 = CTM ⋅ 0 0 1 + CTM det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
non-rotation
x viewport y viewport 1 = CTM ⋅ 0 0 1 + det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
non-scaling-size non-rotation
x viewport y viewport 1 = CTM ⋅ 0 0 1 + 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position
x viewport y viewport 1 = x o y o 1 + CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position non-scaling-size
x viewport y viewport 1 = x o y o 1 + CTM det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position non-rotation
x viewport y viewport 1 = x o y o 1 + det CTM ⋅ 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1
fixed-position non-scaling-size non-rotation
x viewport y viewport 1 = x o y o 1 + 1 0 0 0 1 0 0 0 0 ⋅ x f y f 1

8.13.2. 入れ子ビューポート座標系に対するベクター効果の計算

以下は、ベクター効果なしで入れ子ビューポート座標系における通常の座標変換式です。xviewport(UA)とyviewport(UA)はユーザーエージェントが直接制御する座標です。CTMthisは、対象グラフィックのユーザー座標系から、それが属するビューポート座標系への変換行列のCTMです。CTMparentは、前述のビューポート座標系から親のビューポート座標系への変換行列のCTMです。そして、CTMrootは、最上位のビューポート座標系（UA）のCTMです。

x viewport(UA) y viewport(UA) 1 = CTM root ⋅ ... ⋅ CTM parent ⋅ CTM this ⋅ x userspace y userspace 1

前節の7つの式を入れ子のビューポート座標系に適用する際、これらの式の適用方法は、vector-effectの追加値としてviewportまたはscreenが指定されているかによって次のように変わります。

viewport値が指定された場合、ユーザーエージェントは前章の7つの式のいずれかと、次の式を組み合わせて座標を計算します。

x viewport ( UA ) y viewport ( UA ) 1 = CTM root ⋅ ... ⋅ CTM parent ⋅ x viewport y viewport 1 CTM = CTM this

screen値が指定された場合、ユーザーエージェントは前章の7つの式のいずれかと、以下の式を組み合わせて座標を計算します。

x viewport ( UA ) y viewport ( UA ) 1 = x viewport y viewport 1 CTM = CTM root ⋅ ... ⋅ CTM parent ⋅ CTM this

8.13.3. ベクター効果の例

以下は non-scaling-stroke のvector-effectの例です。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="6cm" height="4cm" viewBox="0 0 600 400"
     viewport-fill="rgb(255,150,200)">

  <desc>non-scaling strokeの例</desc>
  <rect x="1" y="1" width="598" height="398" fill="none" stroke="black"/>

  <g transform="scale(9,1)">
    <line stroke="black" stroke-width="5" x1="10" y1="50" x2="10" y2="350"/>
    <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5"
        x1="32" y1="50" x2="32" y2="350"/>
    <line vector-effect="none" stroke="black" stroke-width="5"
        x1="55" y1="50" x2="55" y2="350"/>
  </g>

</svg>

以下は none のvector-effect（ベクター効果なし）の例です。

CTM変更前 CTM変更後
noneベクター効果の画像 noneベクター効果の画像

ソースコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="500" width="500">

  <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"/>

  <!-- このtransform属性で入れ子ユーザー座標系が変換される -->
  <g transform="matrix(2.1169438081370817,0.3576047954311102,-0.3576047954311102,1.4700998667618626,0,0)
                translate(-50,-50)">
    <svg viewBox="-50,-50,500,500" height="500" width="500">
      <!-- このsvgの基底ユーザー座標系上のグラフペーパー -->
      <g stroke="green" stroke-width="1" fill="none">
        <circle cx="0" cy="0" r="10"/>
        <circle cx="150" cy="150" r="7"/>
        <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"/>

        <line x1="-100" y1="-100" x2="600" y2="-100" stroke-dasharray="5,5"/>
        <line x1="-100" y1="000" x2="600" y2="000"/>
        <line x1="-100" y1="100" x2="600" y2="100" stroke-dasharray="5,5"/>
        <line x1="-100" y1="200" x2="600" y2="200" stroke-dasharray="5,5"/>
        <line x1="-100" y1="300" x2="600" y2="300" stroke-dasharray="5,5"/>
        <line x1="-100" y1="400" x2="600" y2="400" stroke-dasharray="5,5"/>
        <line x1="-100" y1="500" x2="600" y2="500" stroke-dasharray="5,5"/>

        <line y1="-100" x1="-100" y2="600" x2="-100" stroke-dasharray="5,5"/>
        <line y1="-100" x1="000" y2="600" x2="000"/>
        <line y1="-100" x1="100" y2="600" x2="100" stroke-dasharray="5,5"/>
        <line y1="-100" x1="200" y2="600" x2="200" stroke-dasharray="5,5"/>
        <line y1="-100" x1="300" y2="600" x2="300" stroke-dasharray="5,5"/>
        <line y1="-100" x1="400" y2="600" x2="400" stroke-dasharray="5,5"/>
        <line y1="-100" x1="500" y2="600" x2="500" stroke-dasharray="5,5"/>
      </g>

      <!-- ベクター効果を持つ図形 -->
      <!-- 太い赤い右矢印と小さな矩形がこの図形の入れ子ユーザー座標系原点に配置される -->
      <path id="ve" vector-effect="none"
            stroke="red" stroke-width="3" fill="none"
            transform="matrix(1,0,0,1,150,150)"
            d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>
    </svg>
  </g>
</svg>

以下は non-scaling-size の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 non-scaling-sizeベクター効果の画像 
<path id="ve" vector-effect="non-scaling-size"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

以下は non-rotation の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 non-rotationベクター効果の画像 
<path id="ve" vector-effect="non-rotation"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

以下は non-scaling-size non-rotation の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 non-scaling-size non-rotationベクター効果の画像 
<path id="ve" vector-effect="non-scaling-size non-rotation"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

以下は fixed-position の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 fixed-positionベクター効果の画像 
<path id="ve" vector-effect="fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

以下は non-scaling-size fixed-position の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 non-scaling-size fixed-positionベクター効果の画像 
<path id="ve" vector-effect="non-scaling-size fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

以下は non-rotation fixed-position の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 non-rotation fixed-positionベクター効果の画像 
<path id="ve" vector-effect="non-rotation fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

以下は non-scaling-size non-rotation fixed-position の例です。

CTM変更前 CTM変更後
ベクター効果が現れる前の画像 non-scaling-size non-rotation fixed-positionベクター効果の画像 
<path id="ve" vector-effect="non-scaling-size non-rotation fixed-position"
      stroke="red" stroke-width="3" fill="none"
      transform="matrix(1,0,0,1,150,150)"
      d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>

8.14. DOMインターフェイス

8.14.1. SVGTransformインターフェイス

SVGTransformインターフェイスは、 <transform-function>値を表すために使用されます。これらはtransformプロパティや、そのプレゼンテーション属性‘transform’、 ‘gradientTransform’ および ‘patternTransform’に現れます。 SVGTransformは、変換リストの単一コンポーネント（例えばscale(…)やmatrix(…)値）を表します。

SVGTransformオブジェクトは読み取り専用に指定することができ、この場合オブジェクトを変更しようとすると、下記の通り例外が投げられます。

SVGTransformオブジェクトは特定の要素に関連付けることができます。関連付けられた要素は、オブジェクトがその属性を反映する場合、どの要素の‘transform’プレゼンテーション属性を更新するか決定します。特記のない限り、SVGTransformオブジェクトはいかなる要素にも関連付けられていません。

すべてのSVGTransformオブジェクトは2つのモードのいずれかで動作します：

  1. プレゼンテーション属性値の要素を反映 （baseValメンバーのメソッドを通して SVGAnimatedTransformListで公開される）
  2. 切り離されている（SVGTransformオブジェクトが createSVGTransform や createSVGTransformFromMatrixで作成された場合）

SVGTransformオブジェクトは内部に <transform-function>値を保持し、これを値と呼びます。 また、DOMMatrixオブジェクトも保持し、これを行列オブジェクトと呼びます。これはmatrixIDL属性から返されるオブジェクトです。SVGTransformオブジェクトの行列オブジェクトは常に値と同期されています。 

[Exposed=Window]
interface SVGTransform {

  // Transform Types
  const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
  const unsigned short SVG_TRANSFORM_MATRIX = 1;
  const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
  const unsigned short SVG_TRANSFORM_SCALE = 3;
  const unsigned short SVG_TRANSFORM_ROTATE = 4;
  const unsigned short SVG_TRANSFORM_SKEWX = 5;
  const unsigned short SVG_TRANSFORM_SKEWY = 6;

  readonly attribute unsigned short type;
  [SameObject] readonly attribute DOMMatrix matrix;
  readonly attribute float angle;

  void setMatrix(DOMMatrixReadOnly matrix);
  void setTranslate(float tx, float ty);
  void setScale(float sx, float sy);
  void setRotate(float angle, float cx, float cy);
  void setSkewX(float angle);
  void setSkewY(float angle);
};

SVGTransformで定義された数値変換タイプ定数は、 SVGTransformの値のタイプを表すために使われます。 それぞれの意味は以下の通りです：

定数 意味
SVG_TRANSFORM_MATRIX matrix(…)値。
SVG_TRANSFORM_TRANSLATE translate(…)値。
SVG_TRANSFORM_SCALE scale(…)値。
SVG_TRANSFORM_ROTATE rotate(…)値。
SVG_TRANSFORM_SKEWX skewX(…)値。
SVG_TRANSFORM_SKEWY skewY(…)値。
SVG_TRANSFORM_UNKNOWN その他のタイプの値。

数値変換タイプ定数の使用はアンチパターンです。SVGTransformがサポートする変換タイプについて新しい定数値は追加されません。他の種類の変換がサポート・使用される場合、SVGTransformはSVG_TRANSFORM_UNKNOWNタイプを使用します。他のプロパティの挙動については下記を参照してください。

type IDL属性は、 SVGTransformの値の変換項目タイプを表します。 type取得時は次の手順を実行します：

  1. SVGTransformの値が matrix(…)、 translate(…)、 scale(…)、 rotate(…)、 skewX(…)または skewY(…)関数の場合、上記タイプ表の対応する定数値を返す。
  2. それ以外の場合はSVG_TRANSFORM_UNKNOWNを返す。

    例えばscaleX(…)やtranslate3d(…)変換の場合、SVG_TRANSFORM_UNKNOWNが返されます。

matrix IDL属性は、 変換を4x4同次行列として表し、取得時はSVGTransformの行列オブジェクトを返します。 行列オブジェクトが初めて作成されるとき、その値はSVGTransformの変換関数値に一致するように設定され、SVGTransformを反映するモードになります。

CSS Transforms仕様で、各変換関数タイプが特定の行列値にどのように対応するか説明されています。

angle IDL属性は、 rotate(…)、 skewX(…)、 skewY(…)変換関数の角度パラメータを表します。 取得時は以下の手順を実行します：

  1. SVGTransformオブジェクトの値が rotate(…)、 skewX(…)、 skewY(…)関数の場合、その角度引数（度）を返す。
  2. それ以外の場合は0を返す。

setMatrixメソッドは、 SVGTransformを指定された行列値に設定するために使います。setMatrix(matrix)が呼ばれた時は、以下の手順を実行します：

  1. SVGTransformオブジェクトが読み取り専用の場合は、 throwでNoModificationAllowedErrorを投げる。
  2. matrixが is2d メソッドでtrueを返す場合、SVGTransformオブジェクトの値をmatrixと同じ行列を表すmatrix(…)値に設定する。
  3. それ以外の場合は、SVGTransformオブジェクトの値をmatrixと同じ行列を表すmatrix3d(…)値に設定する。
  4. matrixの行列コンポーネント値をSVGTransformオブジェクトの行列オブジェクトにコピーする。
  5. SVGTransformオブジェクトが プレゼンテーション属性値の要素を反映している場合は、反映されている属性を再シリアライズする。

setTranslate、 setScale、 setRotate、 setSkewX、 setSkewYメソッドは、 SVGTransformを新しい変換関数値に設定するために使います。これらのメソッドが呼ばれた場合、以下の手順を実行します：

  1. SVGTransformオブジェクトが読み取り専用の場合は、 throwでNoModificationAllowedErrorを投げる。
  2. 呼ばれたメソッドに応じて、SVGTransformオブジェクトの値を新しい変換関数値に設定する：
    setTranslate(tx, ty)
    新しい変換関数値はtranslate(tx, ty)
    setScale(sx, sy)
    新しい変換関数値はscale(sx, sy)
    setRotate(angle, cx, cy)
    新しい変換関数値はrotate(angle, cx, cy)
    setSkewX(angle)
    新しい変換関数値はskewX(angle)
    setSkewY(angle)
    新しい変換関数値はskewY(angle)
  3. SVGTransformオブジェクトの行列オブジェクトのコンポーネントを、新しい変換関数値に合わせて設定する。
  4. SVGTransformオブジェクトが プレゼンテーション属性値の要素を反映している場合は、反映されている属性を再シリアライズする。

本仕様では、DOMMatrixオブジェクトの挙動に、 Geometry Interfaces仕様で記載された内容に加えて追加要件を課しています。これにより、変換値を受け取るプレゼンテーション属性を反映するために利用できます。

すべてのDOMMatrixオブジェクトは2つのモードのいずれかで動作します：

  1. SVGTransformを反映 （matrixIDL属性で公開される）、
  2. 切り離されている（コンストラクタやcreateSVGMatrixで作成された場合）

DOMMatrixは読み取り専用に指定することができ、この場合オブジェクトを変更しようとすると例外が投げられます。読み取り専用のDOMMatrixのIDL属性に代入したり、可変変換メソッドを呼び出すと、内部値の更新の代わりにNoModificationAllowedError例外がthrowされます。

これは読み書き可能なDOMMatrixインターフェイスにのみ適用されます。DOMMatrixReadOnlyインターフェイス（transformを反映する用途では使われません）は、元々変更しようとすると例外を投げます。

書き込み可能なDOMMatrixのIDL属性に代入したり、可変変換メソッドを呼び出した場合、内部行列値の更新後に以下の手順が実行されます：

  1. DOMMatrixがSVGTransformを反映している場合：
    1. DOMMatrixが is2d メソッドでtrueを返す場合、SVGTransformオブジェクトの値をDOMMatrixと同じ行列を表すmatrix(…)値に設定する。
    2. それ以外の場合は、SVGTransformオブジェクトの値をDOMMatrixと同じ行列を表すmatrix3d(…)値に設定する。
    3. SVGTransformオブジェクトが プレゼンテーション属性値の要素を反映している場合は、反映されている属性を再シリアライズする。

8.14.2. SVGTransformListインターフェイス

SVGTransformListインターフェイスは、リストインターフェイスであり、その要素はSVGTransformオブジェクトです。SVGTransformListはtransformプロパティが取り得る値、すなわち<transform-list>またはキーワードnoneを表します。 

[Exposed=Window]
interface SVGTransformList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  SVGTransform initialize(SVGTransform newItem);
  getter SVGTransform getItem(unsigned long index);
  SVGTransform insertItemBefore(SVGTransform newItem, unsigned long index);
  SVGTransform replaceItem(SVGTransform newItem, unsigned long index);
  SVGTransform removeItem(unsigned long index);
  SVGTransform appendItem(SVGTransform newItem);
  setter void (unsigned long index, SVGTransform newItem);

  // 他のリストインターフェイスにはない追加メソッド。
  SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix);
  SVGTransform? consolidate();
};

createSVGTransformFromMatrixメソッドは、行列オブジェクトから新しいSVGTransformオブジェクトを作成するために使います。 createSVGTransformFromMatrix(matrix)メソッドが呼ばれた際は、以下の手順を実行します：

  1. transformを新たに作成されたSVGTransformオブジェクト（切り離された状態）とする。
  2. transformに対してsetMatrixメソッドが呼ばれた場合に実行される手順を、matrixを引数として実行する。
  3. transformを返す。

consolidateメソッドは、変換リストを単一の変換関数を使った同等の変換へ変換するために使います。consolidate()メソッドが呼ばれた際は、以下の手順を実行します：

  1. SVGTransformListオブジェクトが読み取り専用の場合は、throwでNoModificationAllowedErrorを投げる。
  2. リストが空なら、nullを返す。
  3. リスト内のすべての要素を切り離して削除する。
  4. transformを新たに作成されたSVGTransformオブジェクトとする。
  5. matrixを、単位行列から始めて、リスト内の各SVGTransformの行列オブジェクトの値を順に後置乗算した結果の行列値とする。
  6. transformの行列オブジェクトのコンポーネント値をmatrixの値に設定する。
  7. transformの行列オブジェクトがis2dメソッドでtrueを返す場合、transformの値を行列オブジェクトと同じ行列を表すmatrix(…)値に設定する。
  8. それ以外の場合はtransformの値を行列オブジェクトと同じ行列を表すmatrix3d(…)値に設定する。
  9. transformをこのSVGTransformListにアタッチする。
  10. このリストにtransformを追加する。
  11. リストがプレゼンテーション属性を反映している場合は、反映されている属性を再シリアライズする。
  12. transformを返す。

その他のSVGLengthListインターフェイスメンバーの挙動は、リストインターフェイスで定義されています。

8.14.3. SVGAnimatedTransformListインターフェイス

SVGAnimatedTransformListオブジェクトは、反映されたtransformプロパティおよびその対応するプレゼンテーション属性（要素により‘transform’、‘gradientTransform’、‘patternTransform’）を反映するために使われます。 

[Exposed=Window]
interface SVGAnimatedTransformList {
  [SameObject] readonly attribute SVGTransformList baseVal;
  [SameObject] readonly attribute SVGTransformList animVal;
};

baseValおよびanimValIDL属性は、反映されたプレゼンテーション属性の値を表します。baseValまたはanimVal取得時は、当該プレゼンテーション属性を反映するSVGTransformListオブジェクトが返されます。

8.14.4. SVGPreserveAspectRatioインターフェイス

SVGPreserveAspectRatioインターフェイスは、‘preserveAspectRatio’属性の値を表すために使います。

SVGPreserveAspectRatioオブジェクトは読み取り専用に指定することができ、この場合オブジェクトを変更しようとすると、下記の通り例外が投げられます。

すべてのSVGPreserveAspectRatioオブジェクトは、‘preserveAspectRatio’属性の基準値を反映します（baseValまたはanimValメンバーのメソッドから公開されるSVGAnimatedPreserveAspectRatio経由）。 

[Exposed=Window]
interface SVGPreserveAspectRatio {

  // アラインメントタイプ
  const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
  const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;

  // ミート・オア・スライスタイプ
  const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
  const unsigned short SVG_MEETORSLICE_MEET = 1;
  const unsigned short SVG_MEETORSLICE_SLICE = 2;

  attribute unsigned short align;
  attribute unsigned short meetOrSlice;
};

SVGPreserveAspectRatioで定義された数値アラインメントタイプ定数は、‘preserveAspectRatio’が取り得るアラインメントキーワード値を表すために使われます。それぞれの意味は以下の通りです：

定数 意味
SVG_PRESERVEASPECTRATIO_NONE noneキーワード。
SVG_PRESERVEASPECTRATIO_XMINYMIN xMinYMinキーワード。
SVG_PRESERVEASPECTRATIO_XMIDYMIN xMidYMinキーワード。
SVG_PRESERVEASPECTRATIO_XMAXYMIN xMaxYMinキーワード。
SVG_PRESERVEASPECTRATIO_XMINYMID xMinYMidキーワード。
SVG_PRESERVEASPECTRATIO_XMIDYMID xMidYMidキーワード。
SVG_PRESERVEASPECTRATIO_XMAXYMID xMaxYMidキーワード。
SVG_PRESERVEASPECTRATIO_XMINYMAX xMinYMaxキーワード。
SVG_PRESERVEASPECTRATIO_XMIDYMAX xMidYMaxキーワード。
SVG_PRESERVEASPECTRATIO_XMAXYMAX xMaxYMaxキーワード。
SVG_PRESERVEASPECTRATIO_UNKNOWN その他のタイプの値。

同様に、SVGPreserveAspectRatioで定義された数値ミート・オア・スライスタイプ定数は、‘preserveAspectRatio’が取り得るmeet-or-sliceキーワード値を表すために使われます。それぞれの意味は以下の通りです：

定数 意味
SVG_MEETORSLICE_MEET meetキーワード。
SVG_MEETORSLICE_SLICE sliceキーワード。
SVG_MEETORSLICE_UNKNOWN その他のタイプの値。

alignIDL属性は、‘preserveAspectRatio’値のアラインメントキーワード部分を表します。取得時は以下の手順を実行します：

  1. valueが‘preserveAspectRatio’属性の基準値を反映するようにする。valueは属性の現在の非アニメーション値（属性が存在しないか無効な場合は初期値を使用）とする。
  2. value内のアラインメントキーワードに対応する、上記アラインメント定数表で指定された定数値を返す。

alignを設定するときは、以下の手順を実行します：

  1. SVGPreserveAspectRatioが読み取り専用の場合は、throwでNoModificationAllowedErrorを投げる。
  2. valueがSVG_PRESERVEASPECTRATIO_UNKNOWNであるか、上記アラインメントキーワード表に対応する項目がない場合はreturnする。
  3. stringを、valueに対応する上記アラインメントキーワード表のキーワードとする。
  4. stringにU+0020スペース文字を1つ追加する。
  5. meet or sliceを、このSVGPreserveAspectRatioのmeetOrSliceメンバーから返される値とする。
  6. stringに、meet or sliceに対応する上記meet-or-sliceキーワード表のキーワードを追加する。
  7. 反映された‘preserveAspectRatio’属性をstringに設定する。

meetOrSliceIDL属性は、‘preserveAspectRatio’値のmeet-or-sliceキーワード部分を表します。取得時は以下の手順を実行します：

  1. valueを、‘preserveAspectRatio’値で、その基準値を反映するようにする。valueは属性の現在の非アニメーション値。
  2. meet-or-slice値がvalueに存在しない場合、SVG_MEETORSLICE_MEETを返す。
  3. それ以外は、meet-or-slice値が存在する場合。value内のmeet-or-sliceキーワードに対応する、上記meet-or-slice定数表で指定された定数値を返す。

meetOrSliceを設定するときは、以下の手順を実行します：

  1. SVGPreserveAspectRatioが読み取り専用の場合は、throwでNoModificationAllowedErrorを投げる。
  2. valueがSVG_MEETORSLICE_UNKNOWNであるか、上記meet-or-sliceキーワード表に対応する項目がない場合はreturnする。
  3. alignを、このSVGPreserveAspectRatioのalignメンバーから返される値とする。
  4. stringを、alignに対応する上記アラインメントキーワード表のキーワードとする。
  5. stringにU+0020スペース文字を1つ追加する。
  6. stringに、valueに対応する上記meet-or-sliceキーワード表のキーワードを追加する。
  7. 反映された‘preserveAspectRatio’属性をstringに設定する。

8.14.5. SVGAnimatedPreserveAspectRatioインターフェイス

SVGAnimatedPreserveAspectRatioオブジェクトは、反映された‘preserveAspectRatio’属性を表すために使います。 

[Exposed=Window]
interface SVGAnimatedPreserveAspectRatio {
  [SameObject] readonly attribute SVGPreserveAspectRatio baseVal;
  [SameObject] readonly attribute SVGPreserveAspectRatio animVal;
};

baseValおよびanimValIDL属性は、反映された‘preserveAspectRatio’属性の現在の非アニメーション値を表します。baseValまたはanimVal取得時は、‘preserveAspectRatio’属性の基準値を反映したSVGPreserveAspectRatioオブジェクトが返されます（このIDL属性型SVGAnimatedPreserveAspectRatioを通して取得したSVG要素上の属性）。