SVG文書フラグメントは、‘svg’ 要素内に含まれる任意数のSVG要素で構成されます。
SVG文書フラグメントは、空のフラグメント(すなわち ‘svg’ 要素内に内容がない場合)から、‘rect’ など単一のSVG グラフィック要素のみを含む非常に単純なSVG文書フラグメント、さらにはコンテナ要素とグラフィック要素が複雑かつ深くネストされた集合まで、幅広く構成できます。
SVG文書フラグメントは、単独のファイルやリソースとして独立して存在することもでき、その場合SVG文書フラグメントはSVG文書となります。または、親HTMLやXML文書内にインラインでフラグメントとして埋め込むこともできます。
次の例は、親XML文書内にインラインでフラグメントとして埋め込まれた簡単なSVGコンテンツを示しています。 ‘svg’ や ‘ellipse’ 要素がSVG名前空間に属することを示すため、XML名前空間が利用されている点に注意してください:
<?xml version="1.0" standalone="yes"?> <parent xmlns="http://example.org" xmlns:svg="http://www.w3.org/2000/svg"> <!-- parent contents here --> <svg:svg width="4cm" height="8cm"> <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /> </svg:svg> <!-- ... --> </parent>
次の例は、やや複雑(複数の矩形を含む)なスタンドアロンのSVG文書です:
<?xml version="1.0" standalone="no"?> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>4つの個別の矩形 </desc> <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> <!-- 'rect'要素でビューポートの外枠を表示 --> <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
‘svg’ 要素はSVGコンテンツの途中にも現れることができます。 これは、SVG文書フラグメントが他のSVG文書フラグメント内へ埋め込まれる仕組みです。
SVGコンテンツの途中に ‘svg’ 要素を利用するもうひとつの用途は、新しいSVGビューポートを確立することです。(新しいSVGビューポートの確立参照。)
SVGがXMLとしてパースされる場合、XMLの名前空間勧告 [xml-names] に準拠するため、SVG名前空間の宣言が必要です。これによりすべてのSVG要素がSVG名前空間に属するものとして識別されます。
HTML構文を利用する場合、名前空間はHTMLパーサによって自動的に付与されます。
<html> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" fill="green"> </svg> </html>
この例が示すように、HTMLパーサを使う場合、要素がSVG名前空間に属することを宣言する ‘xmlns’ 属性は不要です。 HTMLパーサが自動的にSVG要素を適切な名前空間で作成します。
この節は、文書の挙動がDOMでどのように定義されるか、またHTMLパーサがどのようにSVGフラグメントを作成できるかについても説明する必要があります。
SVG 2の名前空間は http://www.w3.org/2000/svg
です。これはSVGの以前のバージョンと同じです。
SVGをXMLとしてパースする場合、名前空間宣言を指定する方法はいくつかあります。名前空間接頭辞なしの ‘xmlns’ 属性を ‘svg’ 要素に指定すると、その要素のスコープ内のすべての要素にSVGがデフォルト名前空間として適用されます:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <rect x="10" y="10" width="80" height="80" fill="green" /> </svg>
名前空間接頭辞を ‘xmlns’ 属性に指定した場合(例:xmlns:svg="http://www.w3.org/2000/svg"
)は、該当する名前空間はデフォルトではないので、要素に明示的な名前空間接頭辞を付与する必要があります:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <svg:rect x="10" y="10" width="80" height="80" fill="green" /> </svg:svg>
名前空間接頭辞は祖先要素にも指定できます(上記の例を参照)。詳細は XMLの名前空間勧告 [xml-names] を参照してください。
SVG 2 要件: | ‘svg’ 要素の変換(transform)をサポートすること。 |
---|---|
決定: | SVG 2で ‘transform’ を ‘svg’ 要素上で許可する。 |
目的: | 入れ子になった ‘svg’ 要素に対して変換を許可することで、著者の期待に沿うようにするため。 |
担当: | Dirk(対応不要) |
状況: | 完了 |
x および y 属性は、埋め込まれた ‘svg’ 要素が配置される矩形領域の左上隅を指定します。最外svg要素の場合、これらの属性は効果を持ちません。
最外svg要素の場合、width および height 属性はSVG文書フラグメントの本来のサイズを指定します。 埋め込み ‘svg’ 要素の場合は、 ‘svg’ 要素が配置される矩形領域のサイズを指定します。 いずれの場合も、計算スタイルが auto の場合は 100% と同等に扱われます。
属性定義:
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
zoomAndPan | disable | magnify | magnify | no |
SVGコンテンツに対してユーザーエージェントがズームやパンの手段を提供するかどうかを指定します。詳細は ‘zoomAndPan’ の定義を参照してください。
SVG文書が他の文書のコンポーネントとして参照される可能性がある場合、著者はしばしば参照文書の 最外svg要素 に ‘viewBox’ 属性を含めたくなります。この属性はSVG文書を任意のSVGビューポートにフィットするように設計する便利な方法を提供します。
‘svg’ 要素は、イベントハンドラコンテンツ属性として、Window オブジェクトの多くのイベントハンドラを公開します。また、それらの イベントハンドラIDL属性もミラーします。
onblur、‘onerror’、onfocus、‘onload’、および ‘onscroll’ は、Window オブジェクトのイベントハンドラであり、 ‘svg’ 要素上に公開されます。 これらは通常 SVG要素でサポートされる同名の汎用イベントハンドラの代わりとなります。
‘g’ 要素は、関連するグラフィック要素をまとめるためのコンテナ要素です。
要素のグループや個々のオブジェクトには、‘id’属性を使って名前を付けることができます。名前付きグループは、アニメーションや再利用可能なオブジェクトなど、複数の目的で必要となります。
例:
<?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="5cm" height="5cm"> <desc>2つのグループ、それぞれ2つの矩形</desc> <g id="group1" fill="red"> <rect x="1cm" y="1cm" width="1cm" height="1cm"/> <rect x="3cm" y="1cm" width="1cm" height="1cm"/> </g> <g id="group2" fill="blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm"/> <rect x="3cm" y="3cm" width="1cm" height="1cm"/> </g> <!-- 'rect'要素でビューポートの外枠を表示 --> <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm"/> </svg>
‘g’ 要素は、他の‘g’要素を任意の深さで入れ子にすることができます。
SVG 2 要件: | 未知の要素は描画の目的で ‘g’ として扱われる必要があります。 |
---|---|
決議: | |
目的: | ‘switch’ を使用せずにフォールバックを可能にし、HTMLでの未知の要素の挙動に合わせるため。 |
担当者: | なし(アクションなし) |
ステータス: |
未知の要素を汎用コンテナー要素として扱い、それによって子ツリーが描画されること、および未知の要素に SVGUnknownElement インターフェースを割り当てることは、どちらもリスクがあり、既知の実装はありません。
未知の要素とは、SVG 名前空間に属し、この仕様またはSVGモジュールのいずれにも定義されていないすべての要素です。未知の要素には SVGUnknownElement インターフェースを使用する必要があります。
SVG 名前空間の未知の要素は 描画可能な要素 および コンテナー要素 です。 未知の要素は、状況に応じて未知の要素が ‘g’ 要素または ‘tspan’ 要素に置き換えられたかのように描画される必要があります。 すべてのSVGグラフィックス要素で有効なグローバル属性やプロパティは、未知の要素でも有効であり、通常通り処理される必要があります。 これには条件付き処理属性、ARIA属性、データ属性、 ‘lang’, ‘id’, ‘class’, ‘tabindex’ および ‘style’ が含まれます。 未知の要素に指定されたスタイルは、各スタイルプロパティの継承ルールに従い、子要素に継承される必要があります。
他の名前空間の既知および未知の要素が、‘foreignObject’ を除く任意の SVG 要素の子として現れる場合、この仕様で明示的に記載されていない限り描画されてはなりません。
SVG 名前空間の既知の要素が、SVG の内容モデルで明示的に許可されていない場所に現れる場合、この仕様で明示的に記載されていない限り描画されてはなりません。
したがって、次の例では:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 200"> <rect x=".1" y=".1" width="699.8" height="199.8" fill="none" stroke="blue" stroke-width=".2" /> <mysteryElement> <path d="M0 0h600v200h-600z" fill="darkkhaki"/> </mysteryElement> <hideElement xmlns="http://www.example.com/invisibleML"> nothing to see here <path d="M0 0h300v100h-300z" fill="whitesmoke"/> </hideElement> <text y="2em" font-size="20"><text>This text must not be visible</text></text> <linearGradient> <gradientExtension> <path d="M300 0h100v200h-100z" fill="fuchsia"/> </gradientExtension> </linearGradient> <div xmlns="http://www.w3.org/1999/xhtml">This must not be visible</div> </svg>
SVGでは、グラフィカルオブジェクトを後で再利用するために定義できます。 これを実現するため、SVGは URL参照 構造 [rfc3987] を広く利用しています。 例えば、矩形を線形グラデーションで塗りつぶす場合、 ‘linearGradient’ 要素を ‘id’ プロパティ付きで定義し、 そのIDを矩形の fill プロパティの値として参照できます。例:
<linearGradient id="MyGradient">...</linearGradient> <rect style="fill:url(#MyGradient)"/>
グラデーションのような一部の要素は、それ自体ではグラフィカルな結果を生成しません。そのため、どこに置いても問題ありません。しかし、時にはグラフィカルオブジェクトを定義し、直接描画されないようにしたい場合があります。それは他の場所から参照されるためだけに存在するものです。そのため、また定義済みコンテンツを便利にグループ化するために、SVGは ‘defs’ 要素を提供します。
可能であれば、参照される要素は、それらを使用する要素よりも文書順で前に定義することが推奨されます。 すべての参照要素を 1つの ‘defs’ 要素内に ファイルの先頭付近に集めることで、 マークアップが読みやすく、理解しやすくなります。
‘defs’ 要素は 参照要素のためのコンテナーです。理解しやすさや アクセシビリティの観点からも、 可能な限り参照要素は ‘defs’ 内で定義することが推奨されます。
‘defs’ の内容モデルは ‘g’ 要素と同じです。したがって、 ‘g’ の子になれる要素は ‘defs’ の子にもなれ、その逆も可能です。
‘defs’ の子孫要素は直接描画されません。 ‘defs’ 要素の display の値は none に ユーザーエージェントスタイルシートで必ず設定されなければならず、 この宣言は他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。 ただし ‘defs’ の子孫は常にソースツリー上に存在し、 他の要素から常に参照可能です。したがって、‘defs’ の display プロパティの値によって それらの要素が他の要素から参照されることは妨げられません。
‘symbol’ 要素は、‘use’ 要素によってインスタンス化できるグラフィカルテンプレートを定義するために使用されますが、直接描画されることはありません。
‘symbol’ は、その内部のグラフィックスのために入れ子の座標系を確立します。 symbol が ‘use’ 要素の 参照要素としてインスタンス化される場合、入れ子の ‘svg’ 要素と非常によく似た方法で描画されます。
x、y、width、および height のジオメトリプロパティは、 ‘svg’ 要素の場合と同じ効果を持ちます。 ‘symbol’ が ‘use’ 要素によってインスタンス化された場合も同様です。 特に、width と height が auto に計算され (かつ、インスタンス化する ‘use’ 要素の値で上書きされていない場合)、 それらは 100% の値として扱われます。
SVG 2 で新規追加。 symbol 要素にジオメトリプロパティを指定できるようにすることで、より一貫したレンダリングモデルとなり、 著者が各 symbol のデフォルトサイズを設定できるようになります (ただし ‘use’ 要素の属性で上書き可能)。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
refX | <length> | left | center | right | (なし) | yes |
refY | <length> | top | center | bottom | (なし) | yes |
SVG 2 で新規追加。地図などでよく行われるように、特定のポイントに symbol を揃えやすくするために追加されました。‘marker’ の一致属性に類似しています。
symbol 要素に refX/refY を追加。ライプツィヒ会議で決定。 状態:完了。
marker/symbol の refX/refY に top/center/bottom, left/center/right キーワードを追加します。ロンドン会議で決定。値は 'background-position' に着想を得ています。 状態:完了。
‘refX’ および ‘refY’ 属性は、 symbol の参照ポイントを定義し、symbol の x,y 配置座標に正確に配置されます。 これは x および y プロパティや、 ‘symbol’ および その host ‘use’ 要素の変形の累積効果によって決まります。
キーワード値は ‘refX’ および ‘refY’ 属性と同じ意味を持ち、 ‘marker’ 要素の場合は、該当する方向で 0%、50%、100% に解決されます。
他の位置属性とは異なり、 ‘refX’ と ‘refY’ は ‘viewBox’ や ‘preserveAspectRatio’ 属性が適用された後の symbol コンテンツの座標系で解釈されます。 どちらか一方または両方の属性が指定されていない場合は、該当する次元で調整は行われず、 symbol の矩形ビューポート領域の上端または左端(‘viewBox’座標に関わらず)が x,y の位置に配置されます。
後方互換性のため、 ‘refX’ および ‘refY’ が symbol 要素に指定されていない場合の挙動は、 値 0 を指定した場合とは異なり、 同等の属性が ‘marker’ に指定されていない場合の挙動とも異なります。
同じ文書内で複数回使用されるグラフィックスに ‘symbol’ 要素を使うことで、構造と意味が追加されます。 ‘symbol’ に密接に関連する要素として、 ‘marker’ や ‘pattern’ があります。 これら三つすべてが、SVG内でさまざまな位置や倍率で繰り返し描画可能なグラフィックコンテンツのコンテナーを定義します。 ただし、pattern や marker 内の 再利用グラフィックス は他の要素にグラフィカルな効果を与えるのに対し、 ‘symbol’ の内容は use 要素シャドウツリー内で完全にインタラクティブなコンテンツとして埋め込まれます。
ユーザーエージェントスタイルシートは、 ‘symbol’ 要素の overflow プロパティを hidden に設定します。 これにより、symbol の SVG ビューポート境界で矩形クリッピングパスが生成されます。overflow プロパティが上書きされていない限り、symbol 内のグラフィックスが SVG ビューポートから外れる場合はクリップされます。
‘symbol’ 要素は直接描画されてはなりません。 用途は ‘use’ 要素で参照されることのみです。 ユーザーエージェントは ‘symbol’ 要素の display プロパティを none に設定し、 これは ユーザーエージェントスタイルシートの一部として行われ、 この宣言は他の CSS ルールやプレゼンテーション属性よりも優先されなければなりません。
‘use’ 要素の 直接の 参照要素である ‘symbol’ の 生成された インスタンスは、 display プロパティの計算値が常に inline でなければなりません。 つまり、host となる ‘use’ 要素が描画される場合は必ず描画されます。 この宣言も ユーザーエージェントスタイルシートで他の CSS ルールやプレゼンテーション属性より優先されます。 その他の ‘symbol’ は use 要素シャドウツリー内で element instance を生成するために複製されますが、定義としてのみ機能し、描画されてはなりません。
SVG 2 要件: | ‘use’ 要素でフラグメントなしの場合、外部文書のルート要素を参照できるようにする。 |
---|---|
決議: | SVG 2 では、use等でフラグメントを省略した場合はルート要素への参照と解釈できるよう、参照要件を緩和する。 |
目的: | 参照先文書のルート要素にIDを追加するために著者が文書を修正する必要をなくすため。 |
担当者: | Cameron (ACTION-3417) |
ステータス: | 完了 |
‘use’ 要素は、他の要素を参照し、そのコピーが文書中の ‘use’ の場所で描画されます。 参照要素は コンテナ要素である場合もあり、 その場合は、その要素を根としたSVG文書サブツリー全体のコピーが使用されます。
クローンされたコンテンツは ‘use’ 要素からスタイルを継承し、ユーザーイベントのターゲットにもなれます。 ただし、これらの element instance は参照元とリンクされ、 元のDOMの変更を反映します。 また、参照要素のスコープで適用されるすべてのスタイルルールは、クローンされた シャドウツリーでも適用されます。
x、y、width、height のジオメトリプロパティは 参照要素の配置を指定します。 width および height 属性は、 参照要素がビューポートを定義する場合(例えば ‘svg’ や ‘symbol’)のみ有効です。 その場合、‘use’ 要素で auto 以外の値を指定すると、 参照要素の対応するジオメトリプロパティの値を上書きします。
width または height に負の値を指定するのは不正です。 width または height がゼロで、 かつそれらのプロパティが 参照要素 に影響を持つ場合、 その要素の描画は無効化されます。
x および y プロパティは、 要素のユーザー座標系に影響します。 実装の詳細は レイアウト セクションを参照してください。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
href | URL [URL] | (なし) | yes |
レンダリング用にクローンするSVG文書内の要素やフラグメントへの URL参照。
‘use’ 要素は、 フラグメントなしの ‘href’ を指定することで SVG文書全体を参照できます。 この場合、参照先文書のルート要素を指すと見なされます。
URL参照属性や非推奨XLink属性の共通処理については URL参照属性 および 非推奨XLink属性を参照。SVG 2で新規。 フラグメントなしの ‘href’ を指定することで、 ルート要素にIDがなくてもSVG文書全体を参照可能です。
ユーザーエージェントはセキュリティ上の理由で外部リソース文書を制限する場合があります。 特に、この仕様では ‘use’ でクロスオリジンのリソースリクエストは許可されません。 今後のバージョンや他の仕様で、安全にクロスオリジン再利用を可能にする方法が提供される場合があります。
‘href’ 属性が設定された場合 (または ‘href’ 属性がない場合は ‘xlink:href’ 属性)、 ユーザーエージェントは URLを処理 しなければなりません。 URL処理の結果得られた要素が ‘use’ の 参照要素 となります。
URL解決の結果得られた 参照要素 が SVG要素でもSVGコンテナ要素の子として許可されるHTML名前空間要素でもない場合、 その参照は 不正 となり、‘use’ 要素はエラー扱いとなります。
参照要素が(シャドウツリー含む) ‘use’ 要素の祖先である場合、 これは 不正な循環参照 となり、 ‘use’ 要素はエラーになります。
それ以外の場合、ユーザーエージェントは ‘use’ 要素の内容として シャドウツリーで 再利用グラフィックスを生成して描画しなければなりません。 詳細は次節 use要素シャドウツリー を参照。
‘use’ 要素が 未解決または 不正なURL参照を持つ場合は描画されません。 バウンディングボックス計算の目的では、空のコンテナ要素と同等です。
‘use’ 要素によって生成される再利用グラフィックスは、シャドウツリーとして定義されます。 インタラクティビティやスタイル継承の観点から、これらはSVG内の他の種類の再利用グラフィックス(例えば ‘pattern’ や ‘marker’ の内容)とは大きく異なります。
シャドウツリー内の要素は、‘use’ 要素がコンテナで、その子であるかのように描画されます。 しかしSVGのDOM(ドキュメントオブジェクトモデル)には、‘use’ 要素とその属性のみが含まれます。 SVG DOMには、‘use’ 要素の子としてelement instanceは含まれません。
スクリプトやドキュメントオブジェクトモデルをサポートするユーザーエージェントは、このセクションで記述された通りにuse要素シャドウツリーを実装し、dom仕様[dom]または将来の置き換え仕様に準拠する必要があります。 一方、動的なインタラクティブ処理モードをサポートしないユーザーエージェントは、シャドウDOMのすべての詳細を実装する必要はないかもしれません。 ただし全てのユーザーエージェントは、レイアウトやスタイル継承、必要に応じてマルチメディアや宣言型アニメーションについても、シャドウDOMが実装されている場合と同じように描画されることを保証しなければなりません。
以下の定義は、‘use’ 要素とそのシャドウツリーについて議論する際に適用されます:
ユーザーエージェントが ‘use’ 要素を正常に解決して参照要素を特定した場合、 ユーザーエージェントはホストが ‘use’ 要素自身であるuse要素シャドウツリーを作成しなければなりません。 ‘use’ 要素が 非描画要素の子孫だったり、条件付き処理だったり、displayプロパティが自身または祖先でnoneに設定されていた場合でも、シャドウツリーは必ず作成されなければなりません。
シャドウツリー内の各ノードは、参照文書サブツリーの対応するノードのelement instanceです。 シャドウノードは全てinstance rootから派生しており、これは参照要素のインスタンスであり、シャドウルートノードの直接の子です。
シャドウツリーはオープン(スクリプトから検査可能)ですが、読み取り専用です。
シャドウツリー内の要素、属性、その他ノードを直接変更しようとすると、NoModificationAllowedError
を投げなければなりません。
use要素シャドウツリー内では、 ‘script’ 要素は無効(実行されない)となり、 ‘audio’ や ‘video’ 要素はマルチメディアセクションで指定された制限が適用されます。
以前のSVGバージョンでは、シャドウツリーの内容はSVGグラフィックス要素に制限されていました。 この仕様では、任意の有効なSVG文書サブツリーがクローン可能です。 非グラフィカルな内容をクローンしても、通常は可視的な効果はありません。
参照要素が外部ファイルにある場合、属性やスタイルプロパティ内の全てのURL参照は、絶対URL生成で説明されるように絶対化されなければならず、その値がelement instanceにコピーされる前に処理されます。 シャドウツリー自体は、それを含む文書と同じベースURLを使用します。
ユーザーエージェントは、参照文書サブツリーへの全ての変更(要素、属性、テキストやその他のノードの変更)をシャドウツリーにも反映させなければなりません。 また、参照グラフィックスに有効なスタイルシートへの変更も、シャドウツリーのスコープのスタイルシートの変更に反映させる必要があります(詳細はスタイル継承セクション参照)。
‘use’ 要素または参照要素が変更されて、‘use’ 要素のURL参照が再び未解決となった場合、 そのuse要素のシャドウツリー全体は破棄されます。
‘use’ 要素が、他の ‘use’ 要素や、その内容に ‘use’ 要素を含む要素を参照する場合、上記のシャドウDOMクローン方式は再帰的に適用されます。 ただし、直接または間接的に要素を参照して循環依存を作る参照集合は不正な循環参照です。 そのシャドウツリーが循環参照を作る ‘use’ 要素やelement instanceはエラーとなり、ユーザーエージェントによって描画されてはなりません。
‘use’ 要素のx、y、width、heightプロパティの値は、 再利用グラフィックスの位置決めや、参照要素が入れ子のビューポートを定義する場合はそのビューポートサイズの設定に使用されます。 これらのプロパティが ‘use’ 要素に与える効果は、グラフィックス要素やCSSボックスレイアウトでの効果とは明確に異なります。
x および y プロパティは、追加の変換(translate(x,y))を定義します。 ここで x と y は対応するプロパティの計算値です。 この変換は、他のプロパティで指定された変換の後(つまり変換リストの右側に追加)で ‘use’ 要素に適用されます。
歴史的理由により、追加の変換は再利用コンテンツだけでなく ‘use’ 要素自体に適用されます。 これは、‘use’ 要素に適用され、userSpaceOnUse 単位で計算されるマスク、クリッピングパス、フィルターなどの座標系に影響します。
userSpaceOnUse のグラフィカル効果を変換されていない座標空間で適用しつつ、 x および y を使ってグラフィックスの位置を指定する場合、 著者は ‘use’ 要素を ‘g’ の中に入れ、 グラフィカル効果を ‘g’ 要素に適用することができます。
‘use’ 要素上の width および height プロパティは、 参照される ‘svg’ または ‘symbol’ 要素の対応するプロパティ値を上書きします(そのプロパティのused valueの決定時)。 ただし、‘use’ 要素上のプロパティの計算値が auto の場合は、element instanceで通常通り計算されます。
これらのプロパティは、独自座標系を定義したグラフィックを再利用するたびにスケールするために使えます。 auto が初期値なので、‘use’ 要素で寸法を明示的に設定しない場合は、 ‘svg’ や ‘symbol’ で設定された値がデフォルトとして使用されます。
‘use’ 要素の width および height プロパティは、 参照要素が 新しいSVGビューポートを確立しない場合、効果はありません。 特に、‘use’ 要素自体は新しいビューポートを確立しないため、再利用グラフィックス内のパーセンテージ解釈には影響しません。
その他の点では、 use要素シャドウツリー内の要素のレンダリングとレイアウトは、‘use’ 要素がそのシャドウコンテンツのコンテナであるかのように行われます。 特に、シャドウツリー内の要素が新しいビューポートを確立しない限り、それらは ‘use’ 要素で定義された座標系(累積変換含む)で描画されなければなりません。 これにより、パーセンテージ長や userSpaceOnUse 単位のグラフィカル効果の解釈に影響します。
use要素シャドウツリーは、他のシャドウツリーと同様に CSSスコーピングモジュール [css-scoping-1] で定義されるスタイルカプセル化を示します。 これは、シャドウツリー内の要素が ホスト ‘use’ 要素からスタイルを継承するが、 外部文書で定義されたスタイルルールはシャドウツリー内の要素には一致しないことを意味します。 代わりに、シャドウツリーは独自のスタイルシートリストを保持し、 そのCSSルールがシャドウツリー内の要素に適用されます。
プレゼンテーション属性と ‘style’ 属性は 参照グラフィックス内の要素から 他の属性と同様に element instance にクローンされます。
参照要素が
‘use’ 要素と同じ文書にある場合、
同じ文書のスタイルシートが
元の文書とシャドウツリードキュメントフラグメントの両方に適用されます。
メイン文書のスタイルシートに変更があった場合、シャドウツリーにも影響します。
documentとシャドウルートドキュメントフラグメントの
styleSheets
プロパティでアクセスされるStyleSheetList
オブジェクトは同一でなければなりません。
‘style’ 要素が
参照文書サブツリーの一部として複製される場合、
element instanceのstyleSheet
プロパティは
対応する要素と同じオブジェクトを指します。
参照要素が外部文書にある場合、 その文書処理で生成されたスタイルシートオブジェクトはシャドウツリーに適用され、読み取り専用です。 スタイルシート内のすべてのURL参照(フラグメントのみの参照も含む)は、 参照要素を含む文書のURLに対して絶対化されなければなりません。 ユーザーエージェントは同じ外部文書を参照するすべてのシャドウツリーで同じスタイルシートオブジェクトを再利用する場合があります。
シャドウツリーにスコープされたスタイルルールは、通常メイン文書の要素に影響しません。 同様に、メイン文書のスタイルルールは継承値を変更することでしかシャドウツリー内の要素に影響できません。 ただし、CSSスコーピングは、 シャドウツリー内からホスト要素をスタイリングしたり、 ホストのコンテキスト変化に応じてシャドウツリー内スタイルを調整するための特殊なセレクタも定義しています [css-scoping-1]。
シャドウツリーのスコープ内のCSSメディアクエリは、 対応する「ライト」文書(つまり、シャドウツリーの、すべての入れ子シャドウツリーを再帰的に抜けた後で corresponding use element を含む文書)と同じデバイス特性と寸法で評価されます。
ほとんどの場合、シャドウツリー内の element instance は
元文書の 対応する要素と同じスタイルルールに一致します。
ただし、CSSルールが祖先や兄弟に基づく複雑なセレクタを使って要素をマッチさせている場合、
それらの祖先や兄弟がシャドウツリーの一部としてクローンされていなければ、
そのルールは element instance には一致しません。
同様に、nth-of-type
や nth-child
などの子インデックス疑似クラスも
片方の要素には適用されるがもう片方には適用されない場合があります。
これはSVGの以前のバージョンで定義されていたスタイルクローンの挙動からの変更です。
以下の例は、一貫性のあるスタイルマッチングルールと変更されたスタイルマッチングルールの両方を示しています。 左の円は右の円を描画するために再利用されています。 元の円には様々な方法でスタイルが設定されています:
special
クラスを持つ要素の子孫として円に一致する複雑なCSSセレクタで設定されています。
SVG 1.1 のスタイルクローンモデルでは、 指定されたスタイル値が元要素からelement instanceにクローンされます。 再利用された円は元と同じスタイルとなりますが、 fill値だけは ‘use’(オレンジ)から継承され、 ‘g’(青)からは継承されません。
SVG 2で要求されるシャドウDOMモデルでは、 再利用された円のスタイルは下記のように計算されます:
special
クラスの子孫ではないため一致せず、かわりに円の stroke色はホスト ‘use’ 要素(紫)から継承される。このため、再利用された円は元の円とfill色(異なる要素から継承される)とstroke色(複雑なセレクタが一致しなくなる)の両方で異なります。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="100" viewBox="0 0 200 100"> <title>Style inheritance and the use element</title> <desc> Two circles, one of which is a re-styled clone of the other. This file demonstrates one of the cases where the shadow-DOM style matching rules in SVG 2 have a different effect than the SVG 1.1 style cloning rules. The original circle on the left should have blue fill and green stroke. In a conforming SVG 1.1 user agent, the re-used circle on the right should have orange fill and green stroke. In a conforming SVG 2 user agent, the re-used circle should have orange fill and purple stroke. In all cases, the stroke should be partially transparent and 20 units wide, relative to a total circle diameter of 100 units. </desc> <style type="text/css"> circle { stroke-opacity: 0.7; } .special circle { stroke: green; } use { stroke: purple; fill: orange; } </style> <g class="special" style="fill: blue"> <circle id="c" cy="50" cx="50" r="40" stroke-width="20" /> </g> <use xlink:href="#c" x="100" /> </svg>
例:Use-changed-styles
以前のSVGバージョンでは
:hover
など動的疑似クラスがelement instanceにどのように適用されるべきか明確ではありませんでした。
シャドウツリーモデルでは、こうした疑似クラスは
element instanceまたは対応する要素のいずれかに、ユーザーがどちらの要素と対話しているかによって個別に一致する必要があります。
‘use’ 要素に 'visibility:hidden' を指定しても、 参照コンテンツが描画されないことを保証しません。 display や opacity プロパティと異なり、 visibility プロパティはコンテナ要素に直接適用されないため、 ‘use’ 要素には直接適用されません。 visibility は通常継承されるため、 use要素を隠すと多くの場合子コンテンツも隠れますが、必ずそうなるとは限りません。 シャドウツリー内のグラフィックス要素に 'visibility:visible' が指定されている場合、 ‘use’ 要素が 'visibility:hidden' を指定していてもその要素は表示されます。
次の例では、主要なスタイルルールは以下の通りです:
.dark { visibility: hidden; } .eyes { visibility: visible; } svg:hover .dark, svg:focus .dark { visibility: visible; }
"dark"クラスは use要素を含むグループに設定されており、 再利用グラフィックスのすべての部分は hiddenなvisibilityを継承しますが、 "eyes"クラスのサブツリーだけはvisibleにリセットされます。 グラフィックにホバーまたはフォーカスすると、非表示効果は解除されます。
例:Use-visibility-hidden, デフォルトスタイル
例:Use-visibility-hidden, インタラクティブスタイル
この例は、他のスタイルプロパティ (fill や stroke)が ‘use’ 要素に指定された場合の継承も示しています。 また、symbol内の要素が明示的な値(例:ピンクの鼻や耳、白いしっぽ)を指定していれば、それらの値は継承されません。
use要素シャドウツリーに ‘audio’ や ‘video’ 要素が含まれる場合、以下の挙動が保証されなければなりません:
Web Animations API [web-animations-1] と SVG Animations仕様 [svg-animation] は、 DOMプロパティを直接操作せずに、ターゲット要素の属性やスタイルを非CSS的にアニメーションする方法を定義しています (詳細は アニメーション付録 を参照)。 これらの機能を実装するユーザーエージェントは、 参照文書サブツリーの要素に適用されるすべてのアニメーションが、 このセクションで説明される通り use要素シャドウツリー内のその要素のインスタンスにも適用されることを保証しなければなりません。
参照グラフィックス内の要素属性を直接操作して作られたスクリプトアニメーション (‘style’属性やそのIDLプロパティも含む)は、 他のDOM操作と同様、シャドウツリー内のelement instanceにも伝播されます。
CSSによるアニメーション効果は、他のスタイルシートルールとともに複製され、 スタイルのスコープと継承セクションで指定された手順に従います。
use要素シャドウツリー内のすべてのアニメーションは、 対応するuse要素と同じドキュメントタイムラインで動作します。 参照要素が同じ文書でも外部文書でも関係ありません。
Web Animations API メソッド [web-animations-1] によって適用されるアニメーション効果で、 アニメーションのターゲットがシャドウツリー内のelement instanceの対応要素(corresponding element)である場合、 ユーザーエージェントは ShadowAnimation を構築しなければなりません。 そのsourceは Animation オブジェクト、 targetは element instance となります。 異なるツリーに複数のインスタンスがある場合、それぞれに1つずつShadowAnimationを生成します。
ユーザーエージェントは、シャドウツリー生成時点で効力を持つ全てのWeb Animations APIアニメーション (保留中・凍結中を含む)についてShadowAnimationを生成し、 シャドウツリー存続中に新たに適用されたアニメーションについても生成しなければなりません。 CSSアニメーションやアニメーション要素についてはShadowAnimationオブジェクトを生成してはなりません (これらは別途複製されるため)。
インターフェース定義の一部として、 ShadowAnimation は読み取り専用であり、 その sourceAnimation の変更を必ず反映しなければなりません。
読み取り専用の element instance(または疑似要素)に対して
新しいアニメーションを直接適用しようとした場合、
use要素シャドウツリー内では
NoModificationAllowedError
を投げなければなりません。
animation element [svg-animation] が 参照文書サブツリー内の要素をターゲットとしている場合、 ユーザーエージェントは、use要素シャドウツリー内でも同等のアニメーション要素が効力を持つことを保証しなければなりません。 アニメーション要素自体が参照文書サブツリーの一部であれば、element instanceの生成によって自動的に実現されます。 そうでない場合は、ユーザーエージェントはそのアニメーション要素をノードとしてシャドウツリーに存在するかのような効果を持つelement instanceを生成しなければなりません。 これら生成されたアニメーション要素の有効な文書順序は、対応する要素の文書順序と同じでなければなりません。
各アニメーション要素やインスタンスは、ターゲット要素が同じノードツリー(シャドウまたはライト)にある場合のみ効果を持ちます。 ターゲット指定が暗黙的(親要素)であっても、明示的(id属性によるURLクロス参照)であっても同様です。 このように、アニメーション要素とターゲット要素の一対一関係が維持されます。
‘id’ 属性は他の属性と同様に、 対応する要素からelement instanceにクローンされます。 クローンと元要素は異なるノードツリーにあるため、‘id’の一意性要件とは矛盾しません。
ドキュメントやシャドウツリー内のすべてのアニメーション要素が、他の要素の ‘id’ 属性で識別された要素でイベント発生時に開始・終了するようタイミングされている場合、 そのidを持つelement instanceが同じイベントを受けた場合にも開始・終了しなければなりません。 これは、参照要素へのイベントリスナーがその要素のインスタンスにもイベントをリッスンする仕様(use要素シャドウツリーのイベント処理セクション参照)と一致します。 この挙動は、イベントだけでアニメーション開始・終了が定義され、idによる指定がない場合(つまりターゲット要素自身のイベントのみを暗黙的に監視する場合)には適用されません。 その場合、各アニメーション要素は自分のターゲットのみでトリガーされます。
シャドウツリー内でアニメーション要素のインスタンスが生成された時点で、 対応する要素に関連付けられた(凍結中も含む)アクティブなアニメーションがあり、 そのアニメーション開始イベントがそのインスタンスにも該当する場合、 element instance側のアニメーションも開始されなければならず、 開始時刻は対応する要素のタイミングに合わせてドキュメントタイムライン上で遡って調整されます。
多くの場合、このセクションの要件により、 element instance と 対応する要素 のアニメーションは同期します。 アニメーションが純粋な時間ベースの場合や、idで参照された要素へのユーザー操作で開始・終了する場合は同期します。 しかし、ターゲット要素へのユーザー操作イベントによってアニメーションがトリガーされる場合(暗黙的)、 実際に操作された要素またはインスタンスのみがアニメーションを表示します。
これは従来のSVGの仕様変更であり、以前は 対応する要素上のすべてのアニメーションが、ユーザー操作に関係なくミラーされる必要がありましたが、 element instanceへのユーザー操作の扱いは明確でありませんでした。 この変更により、アニメーション要素で宣言されたインタラクティブなアニメーションが、インタラクティブCSSスタイルやCSSアニメーションと同じ挙動になります。
どれかのインスタンスまたは元要素がイベントを受け取ったときに全てのインスタンスにアニメーションを適用したい場合は、 要素の ‘id’ を明示的に指定してください:
<set href="#target" begin="mouseover" ... />
<!-- マウスオーバーされた要素だけに適用 -->
<set href="#target" begin="target.mouseover" ... />
<!-- id 'target' を持つ要素のすべてのインスタンス(ライト/シャドウ両方)に、どれかがマウスオーバーされた時に適用 -->
use要素シャドウツリー内の要素は、 DOMイベントのリスナーにもターゲットにもなれます。 イベントのリターゲットはカプセル化を提供し、 イベントがシャドウツリーからライト(通常のDOM)にバブルアップする際、シャドウDOM構造の詳細が隠蔽されます。
イベントのリターゲットはSVG 2で新規追加です。 これはShadow DOM仕様や既存実装、メインDOMの要素だけを意識する著者の期待にも整合性をもたらします。
参照グラフィックス内の要素に定義されたイベントリスナーは、
use要素シャドウツリー内のその要素の各element instanceでも、
同じキャプチャフェーズで同じイベントをリッスンしなければなりません。
これは event attributes(他のDOM属性同様複製される)によるリスナーや、
addEventListener
メソッドによるリスナーも含みます。
ユーザーエージェントは、各 element instance のイベントリスナーリストが
対応する要素と同期していることを保証しなければなりません。
use要素シャドウツリー内の読み取り専用 element instance
に直接イベントリスナーを割り当てることはできません。
そのような要素にイベントリスナーを追加しようとすると、NoModificationAllowedError
を投げなければなりません。
use要素シャドウツリー内のイベントは、 シャドウツリー イベントパスとイベントリターゲットアルゴリズム [DOM] に従いディスパッチ・バブルされます。
一般に、use要素シャドウツリーのイベントパスは、 イベントターゲット要素の祖先からシャドウルートまで、 さらに host ‘use’ 要素およびそのイベントパスを経てウィンドウへと構築されます。 キャプチャフェーズでは、イベントはウィンドウから通常の文書ツリーを通って ‘use’ 要素、 そしてシャドウルートオブジェクト、さらにシャドウツリー(または再帰的に複数のシャドウツリー)を通ってイベントターゲット要素へ伝播します。 バブルフェーズでは逆方向に、シャドウツリーの要素からシャドウルート、‘use’ 要素とその祖先へ伝播します。
イベントリターゲットアルゴリズムにより、
‘use’
要素やその祖先でのイベントリスナーから見ると、
シャドウツリー内のelement instanceへのすべてのイベントは、ターゲットが ‘use’ 要素自体にリターゲットされます。
イベントが target
と
relatedTarget
の両方を持ち、
それらが同じ ‘use’
要素を指すようリターゲットされる場合、
イベントはシャドウツリー外には一切伝播しません。
これは例えば、シャドウツリー内のある要素から別の要素にフォーカスが移った場合などです。
他にも特定のイベント型は、生成されたシャドウツリーの外には伝播されないよう制約されています。
一方、シャドウツリー内でイベントを処理するリスナー(対応する要素に追加されている場合)は、
target
が
シャドウツリー内の読み取り専用 element instance を指すイベントを受け取ります。
この correspondingElement や
correspondingUseElement
プロパティを使うことで、
メインDOMの変更可能な要素と関連付けることができます。
SVG には ‘switch’ 要素と 属性 ‘requiredExtensions’ および ‘systemLanguage’ があり、 ユーザーエージェントの機能やユーザーの言語に応じて表示を切り替えることができます。
属性 ‘requiredExtensions’ および ‘systemLanguage’ は テストとして働き、true または false に評価されます。‘switch’ は、これらの属性がすべて true となる最初の子要素を描画します。 属性が指定されていない場合は true とみなされます。
条件付き処理によって要素が除外された場合、その要素は display プロパティの使用値が
none
であるかのように扱われます。
display プロパティと同様、条件付き処理属性は要素の直接的な描画のみに影響し、
他の要素(‘use’
など)から参照されることを妨げません。
結果として:
以前のSVGバージョンには、3つ目の条件付き処理属性 requiredFeatures
が含まれていました。
これは、SVG仕様の一部のみを実装するユーザーエージェント向けにフォールバック動作を提供する意図でしたが、
この属性の仕様と実装が不十分で、機能サポートのテストとして信頼できませんでした。
‘switch’ 要素は、 直属の子要素に対して ‘requiredExtensions’ および ‘systemLanguage’ 属性を順に評価し、 これらの属性がすべて true となる最初の子要素を処理・描画します。他の子要素はスキップされて描画されません。 子要素が ‘g’ などのコンテナ要素の場合は、 そのサブツリー全体が処理・描画されるか、スキップ・非描画となります。
SVG で ‘systemLanguage’ 属性を評価する場合、 ‘switch’ 要素の子孫要素の評価順序は、 SMIL仕様で定義される 'allowReorder' 属性が常に 'yes' であるかのように扱われなければなりません。
プロパティ display および visibility の値は、 ‘switch’ 要素の処理には影響しません。 特に、‘switch’ の子要素に display を none に設定しても、true/false 判定には影響しません。
‘switch’ 要素は ‘script’ や ‘style’ 要素の処理には影響しません。
詳細と例については 他種オブジェクトの埋め込みを参照してください。
‘requiredExtensions’ 属性は、必要な言語拡張のリストを定義します。 言語拡張とは、ユーザーエージェントが本仕様で定義された機能セットを超えて持つ能力です。 各拡張は URL参照 によって識別されます。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
requiredExtensions | 空白区切りトークンの集合 [HTML] | (なし) | no |
値は、必要な拡張を識別する URL参照 のリストであり、個々の値は空白で区切られます。 指定された 拡張 のすべてがユーザーエージェントでサポートされているかどうかを判定します。 すべての拡張がサポートされていれば属性は true となり、それ以外の場合は現在の要素とその子要素はスキップされて描画されません。
指定された URL参照 に空白が含まれる場合は、その空白をエスケープしなければなりません。
属性が存在しない場合は暗黙的に "true" と評価されます。 属性 ‘requiredExtensions’ に null文字列または空文字列が与えられた場合は "false" と評価されます。
‘requiredExtensions’ は ‘switch’ 要素と組み合わせてよく使われます。 他の状況で使用する場合は、対象要素の描画有無を単純に切り替えるスイッチとなります。
拡張のURL名には、"http://example.org/SVGExtensionXYZ/1.0" のようにバージョン情報を含めるべきです。 そうすることでスクリプト作成者が異なる拡張バージョンを区別できます。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
systemLanguage | カンマ区切りトークンの集合 [HTML] | (なし) | no |
値は カンマ区切りトークンの集合 であり、 各トークンは Language-Tag 値(BCP 47 [BCP47])でなければなりません。
ユーザーの言語設定で示される言語タグのうち、いずれかがこのパラメーターの値に指定された言語タグと大文字・小文字を区別せず一致する場合、 またはユーザーの言語タグがパラメーター値の言語タグの大文字・小文字を区別しない接頭辞であり、 その接頭辞の直後の文字が "-" である場合は "true" となります。
それ以外の場合は "false" となります。
属性が存在しない場合は暗黙的に "true" と評価されます。 属性 ‘systemLanguage’ に null文字列または空文字列が与えられた場合は "false" と評価されます。
注: この接頭辞一致規則は、言語タグが常に、 あるタグの言語を理解できるユーザーが、そのタグを接頭辞とするすべての言語も理解できることを意味するものではありません。
接頭辞規則は、実際にそのような場合に接頭辞タグの利用を可能とするためのものです。
実装者向け注: ユーザーに言語選択を提供する際は、ユーザーが上記の言語一致の詳細に精通していないことを考慮し、適切なガイダンスを提供すべきです。 例として、"en-gb" を選んだ場合、ユーザーは英国英語が利用できないときは英語文書全般が提供されると思うかもしれません。 ユーザー設定のUIは "en" も追加するよう導くことで最適なマッチング挙動を得られるようにしてください。
複数の言語で複数の対象読者向けコンテンツを示す場合は、複数言語を列挙できます。例えば、マオリ語と英語の原文を同時に表示する場合は、以下のようにします:
<text systemLanguage="mi, en"><!-- content goes here --></text>
ただし、オブジェクト内に複数言語が含まれていても、 ‘systemLanguage’ テスト属性が複数言語向けであるとは限りません。 例として、「A First Lesson in Latin」など入門書は明らかに英語話者向けです。 この場合、‘systemLanguage’ テスト属性は "en" のみを含めるべきです。
著者向け注: 複数の言語オブジェクトを ‘switch’ で囲み、いずれも一致しない場合はコンテンツが何も表示されないことがあります。 したがって、‘switch’ の末尾には全ての状況で許容される「キャッチオール」選択肢を含めることが推奨されます。
‘systemLanguage’ は ‘switch’ 要素と組み合わせてよく使われます。 他の状況で使用する場合は、対象要素の描画有無を単純に切り替えるスイッチとなります。
多言語の記述テキスト選択は、‘lang’ 属性によって追加され、 ‘desc’ および ‘title’ の国際化を可能にしました。
SVG 2で新規追加。'lang'属性の追加はRigi Kaltbad対面会議で決定。 'desc'と'title'要素数に制限を設ける記述を削除。状態:完了。
SVG文書内の コンテナ要素 や グラフィックス要素は、 子要素として 0 個以上の ‘desc’ や ‘title’ 要素を持つことができます。 その内容はテキストです。‘desc’ と ‘title’ 要素は グラフィックスの一部として視覚的には描画されません。 ‘title’ および ‘desc’ 要素の display値は ユーザーエージェントスタイルシートによって常に none に設定され、 この宣言は他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。
複数の兄弟 ‘desc’
または ‘title’ 要素は
必ず異なる言語でなければなりません。
これは記述要素またはその祖先に ‘lang’
属性(または xml:lang
属性)を使って定義されます。
ユーザーエージェントは、ユーザーの言語設定と最も一致する各種要素を選択しなければなりません。
空文字列の言語タグ(言語なし、例えば絵文字のみの代替テキスト)は、全てのユーザー指定言語よりも低い優先度でマッチします。
複数の同等なマッチがあれば最初のものを使います。
'title'または'desc'にマッチがなければ、その型の最初の要素が選択されます。
以下の例は、再利用された星アイコンに対する代替言語タイトルをHTML文書内にインラインで示しています。
この例ではHTML文書全体の言語が正しく en
(国コード指定なしの英語)で宣言されていると仮定します。
<svg> <use href="#star"> <title>Favourite</title> <title lang="en-us">Favorite</title> <title lang="nl">Favoriet</title> <title lang="">★</title> </use> </svg>
最初の title
要素は文書の言語(en
)を継承します。他の要素はそれぞれ明示的に言語が宣言されています。
ユーザーの優先言語が提供された中で米国英語なら、アイコンタイトルは米国式スペル "Favorite" になります。
優先言語がオランダ語なら "Favoriet" になります。
優先リストに一般的な英語がオランダ語より上位なら、イギリス式スペル "Favourite" になります。
ユーザーがオランダ語も英語も分からなければ、タイトルは星記号(★)になります。
これは理想的ではありません(多くのスクリーンリーダーはローカライズされた「黒い星」と読み上げます)が、何の代替テキストもないよりはましです。
著者は、SVG 1.1対応ユーザーエージェントで多言語記述テキスト未実装の場合、
各型の最初の要素がユーザー設定に関わらず選ばれることに注意してください。
SVG 1.1 ユーザーエージェントは、親の最初の子でない title
や、
他の記述要素以外が前にある desc
を認識できない場合もあります。
複数の ‘title’ や ‘desc’ 要素によるローカライズ情報の提供は、既知の実装がなくリスクがあります。
ユーザーエージェントは、選択された 'title' および 'desc' 要素のテキスト内容を、親要素の名前・説明計算の一部として プラットフォームのアクセシビリティAPIに提供しなければなりません。 SVG Accessibility API Mappings [SVG-AAM] に定義されています。
任意の 'title' または 'desc' 要素を 描画される要素 の直接の子に含めることは、 その描画要素がグラフィック上で意味的に重要であることを示します。 著者は空の'title'や'desc'(テキスト内容がない、または空白のみ)を含めるべきではなく、 SVG生成ツールも含めてはなりません。 そうすると支援技術利用者に名前無しオブジェクトが提示されてしまいます。
個々のグラフィック要素自体に意味がない場合は、 意味あるオブジェクトを記述する最も近いコンテナ要素に代替テキストを提供すべきです。 著者は、‘g’要素で描画要素をグループ化し、 そのグループに ‘title’ で名前付けしてください。 逆に、スタイルやレイアウトの適用のみで、意味あるオブジェクトやグループ構造を定義しないコンテナは、 代替テキストを持つ必要はありません。
親が 描画されない 記述テキスト要素は、 著者やツールが参照情報として使うことはできますが、 このデータは通常支援技術利用者には利用できません。 ただし、非描画要素が描画要素のアクセシブル名や説明に参照される場合 (SVG-AAMで定義)、 再帰的な計算で参照要素の記述子子要素が利用されます。
記述・タイトル要素は他の名前空間からのマークアップテキストを含めることができます(標準XML機構で名前空間を指定)。 ただし、このようなマークアップによる代替テキストの意味づけには依存すべきではありません。 支援技術に必ず公開されるのはプレーンテキスト内容のみです。
HTMLパーサーは ‘title’ および ‘desc’ 内のマークアップを HTMLフラグメント内のマークアップと同じように扱い、 ほとんどの要素がHTML名前空間に割り当てられます。
ユーザーエージェントは ‘title’ 内のマークアップを使って タイトル(ツールチップなど)の視覚的提示に影響させることができますが、必須ではありません。
‘title’ 子要素は、 要素のための短いテキスト代替を表します。
リンクの場合、これはリンク先リソースのタイトルや説明となり得ます。画像や描画オブジェクトの場合、グラフィックの短い説明となり得ます。インタラクティブなコンテンツの場合は、要素のラベルや利用方法の説明などとなります。
描画要素に可視ラベル(例えば ‘text’ 要素)もある場合は、‘title’ 要素に重複した情報を記述しないでください。 代わりに、可視ラベルは ‘aria-labelledby’ 属性で描画要素に関連付けてください。
インタラクティブなユーザーエージェントは、‘title’ 要素のプレーンテキスト内容を、プラットフォームの慣例に沿った方法でユーザー操作に応じて提示するべきです。 既存のユーザーエージェントは、親要素にマウスオーバーした際に ‘title’ 要素をツールチップとして表示することが一般的です。
著者は、スタンドアロンSVG文書のルートsvg要素に ‘title’ 子要素を提供するべきです。ユーザーは文書を文脈外で参照することが多いため、文脈豊かなタイトルを指定してください。例えば「Introduction」のようなタイトルではなく、「Introduction to Medieval Bee-Keeping」のようなものを推奨します。アクセシビリティの理由から、ユーザーエージェントは常にルートsvg要素の‘title’子要素の内容をユーザーに提供すべきです。 ただし、これは通常、ネストされたSVGやグラフィック要素のツールチップとは異なり、例えばブラウザタブに表示するなど、他の手段で行われます。
‘desc’ 要素は、 要素のためのより詳細なテキスト情報(説明など)を表します。これは通常、支援技術に提供され、グラフィックの外観詳細や複雑なウィジェットの機能説明など、より詳細な情報を伝えるために使われます。一般ユーザーには通常提示されないため、必須の操作説明などには使うべきではありません。
著者は、グラフィックの一部に詳細情報(可視テキストも含む)を関連付けるために、‘aria-describedby’ 属性 (説明対象要素または親コンテナに指定)を使い、その値として説明を含むSVGまたはHTML要素のID参照を指定できます。 説明を提供する際、‘aria-describedby’ 属性が 子要素 ‘desc’ よりも優先されます。 可視説明と補足情報となる子 ‘desc’ 要素の両方がある場合は、 要素自身の ‘id’ を ‘aria-describedby’ リストに明示的に含め、 2つの説明を連結できるようにしてください。
SVGコンテンツにメタデータを含める場合は、‘metadata’ 要素内で指定するべきです。 ‘metadata’ 要素の内容は、他のXML名前空間からの要素で構成し、 それらの要素は XML名前空間勧告 [xml-names]に準拠した方法で表現する必要があります。
SVG 2では、メタデータ要素の構造化に関する推奨事項は削除されました。
メタデータ内容は直接描画されません。 ‘metadata’ 要素の display値は常に none に ユーザーエージェントスタイルシートで設定され、 この宣言は他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。
以下はメタデータをSVG文書に含める例です。例ではダブリンコア1.1スキーマを使っています。 (RDFベースでないものを含め、他のXML互換メタデータ言語も利用可能です。)
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" xmlns = 'http://www.w3.org/2000/svg'> <desc xmlns:myfoo="http://example.org/myfoo"> <myfoo:title>This is a financial report</myfoo:title> <myfoo:descr>The global description uses markup from the <myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr> <myfoo:scene><myfoo:what>widget $growth</myfoo:what> <myfoo:contains>$three $graph-bar</myfoo:contains> <myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene> </desc> <metadata> <rdf:RDF xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#" xmlns:dc = "http://purl.org/dc/elements/1.1/" > <rdf:Description about="http://example.org/myfoo" dc:title="MyFoo Financial Report" dc:description="$three $bar $thousands $dollars $from 1998 $through 2000" dc:publisher="Example Organization" dc:date="2000-04-11" dc:format="image/svg+xml" dc:language="en" > <dc:creator> <rdf:Bag> <rdf:li>Irving Bird</rdf:li> <rdf:li>Mary Lambert</rdf:li> </rdf:Bag> </dc:creator> </rdf:Description> </rdf:RDF> </metadata> </svg>
HTMLをサポートするユーザーエージェントは、以下のHTML要素(HTML名前空間内)をSVG文書でサポートする必要があります:
base
要素は、
文書内のすべてのURL値(例:ペイントサーバー参照や ‘use’ 要素の参照)に影響する点に注意してください。
ただし、特定のターゲット要素を識別するために URL参照を処理する場合、
ユーザーエージェントは生成された絶対URLを常に現在の文書ベースURLと比較し、
それが 同一文書URL参照かどうか判定しなければなりません。
この方法により、同一文書内の要素へのターゲットフラグメント参照は、
文書ベースURLが変更されても有効なままとなります。
SVGは、SVGコンテンツ内の任意の場所で外部名前空間の要素を含めることを許可します。 一般的に、SVGユーザーエージェントは 未知の外部名前空間の要素をDOMに含めますが、描画処理ではこれらを無視・除外します。
重要な例外については、埋め込みコンテンツ章の SVGサブツリー内のHTML要素や 他種オブジェクトの埋め込みに記載されています。 また、SVG名前空間内の未知の要素の扱いも参照してください。 これらは異なる扱いとなります。
さらに、SVGは任意のSVG要素上で外部名前空間の属性を含めることを許可しています。 SVGユーザーエージェントは未知の属性をDOMに含めますが、その他は無視するべきです。
著者は、未知の名前空間付き要素や属性がHTMLパーサーでは名前空間要素として解釈されないことを認識してください。 代わりに、名前空間プレフィックスはタグ名や属性名に含まれ、 要素は親要素の名前空間に、属性はデフォルト名前空間に配置されます。
XMLとHTML文書両方で一貫したパース結果を得るためにカスタム属性を追加したい場合、 ‘data-*’ 属性を利用できます。 これらは、文書内の他の要素と関連しない情報を格納する場合、 SVG ‘metadata’ 要素に追加できます。
SVGの外部名前空間含有機能は、以下の目的で利用できます:
例えば、ビジネスグラフィックスオーサリングアプリケーションは、 SVG文書内にプライベートデータを含めることで、再読込時にチャート(この場合は円グラフ)を正しく再構成できるようにすることができます:
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" xmlns = 'http://www.w3.org/2000/svg'> <defs> <myapp:piechart xmlns:myapp="http://example.org/myapp" title="Sales by Region"> <myapp:pieslice label="Northern Region" value="1.23"/> <myapp:pieslice label="Eastern Region" value="2.53"/> <myapp:pieslice label="Southern Region" value="3.89"/> <myapp:pieslice label="Western Region" value="2.04"/> <!-- 他のプライベートデータ --> </myapp:piechart> </defs> <desc>このチャートは他の名前空間のプライベートデータを含みます </desc> <!-- ここに実際のSVGグラフィック要素(円グラフ描画)が入る --> </svg>
‘id’ 属性はすべてのSVG要素で利用可能です:
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
id | (下記参照) | (なし) | no |
要素のID [DOM] を反映しなければなりません。 ‘id’ 属性はノードツリー内で一意でなければならず、 空文字列であってはならず、 空白文字を含んではなりません。
追加の要件として、‘id’ 属性がXML文書内で有効となるためには、 該当するXMLバージョンの仕様で定義された要件に従う必要があります。 スタンドアロンSVG文書はXML 1.0構文 [xml] を使用し、 有効な ‘id’ 値は XML名トークンである必要があります。 有効なXML 1.0名は、指定された文字(英字、数字、一部の記号)しか含まず、 数字、ピリオド(.)、ハイフン(-)で始まってはなりません。
ユーザーエージェントはSVGファイル内の ‘id’ 値をXMLの有効性に関係なく処理すべきです。
著者は、‘id’ の値として URLターゲットフラグメントとして使われる際に SVGビュー指定 や メディアフラグメントと解釈される値は避けるべきです。
‘lang’ 属性(名前空間なし)は、要素の内容および 要素のテキストを含む属性の主言語を指定します。
XML名前空間の ‘lang’ 属性はXML [xml] で定義されています。
これらの属性が要素から省略された場合、その要素の言語は親要素の言語(もしあれば)と同じになります。
XML名前空間の ‘lang’ 属性は、XML文書のSVG要素で使用できます。 名前空間なしとXML名前空間の両方の ‘lang’ 属性が同じ要素に指定された場合、 ASCII大文字・小文字を区別しない比較で、値が完全に一致していなければなりません。
名前空間なしとXML名前空間の両方の ‘lang’ 属性が要素に設定された場合、 ユーザーエージェントはXML名前空間の ‘lang’ 属性を使用し、 名前空間なしの ‘lang’ 属性は要素の言語判定では無視しなければなりません。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
lang | 言語タグ [ABNF] | (なし) | no |
‘lang’ 属性は、要素の内容および 要素のテキストを含む属性の主言語を指定します。値は有効なBCP 47言語タグか空文字列でなければなりません。空文字列を設定すると主言語は不明となります。 [BCP47]。
SVG 2要件: | ‘xml:space’によるテキストレイアウトの制御を廃止し、代わりに ‘white-space’プロパティを使用する。 |
---|---|
決議: | SVG 2からxml:spaceを削除し、SVG 1.1テストスイートから関連テストも削除。 |
目的: | CSSとの整合性のため。 |
担当者: | Chris (ACTION-3004, 完了; ACTION-3005, 完了) |
ステータス | 完了。 |
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
xml:space | (下記参照) | default | no |
文字データ内の空白保持を指定するための非推奨XML属性。指定可能な値は 'default' と 'preserve' のみで、空白を含みません。詳細は 拡張マークアップ言語 (XML) 1.0 勧告 [xml] と SVGの 空白処理の説明を参照してください。
新規コンテンツでは代わりに white-space プロパティを使用してください。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
tabindex | 有効な整数 [HTML] | (なし) | no |
この内容属性は、要素がフォーカス可能か、順次フォーカス移動で到達可能か、 順次フォーカス移動時の相対順序を制御するために使われます。
"tab index"という名称は、フォーカス可能な要素間を移動する際によく使われる "tab"キーに由来します。"tabbing"は、順次フォーカス移動で到達可能な要素を前方へ移動する操作を指します。
すべてのSVG要素は カスタムデータ属性 をサポートします。 これらは名前空間なしで、名前が"data-"で始まる属性です。 HTML仕様のカスタムデータ属性の要件も参照してください。
上記のARIA属性リストは、将来的なWAI-ARIA仕様で拡張される可能性があります。
どの 描画可能要素 でもARIAロール属性を指定できます。 ロール属性は 非描画要素 では無視されます。 属性が指定された場合、その値は要素が属するWAI-ARIAロールを表す 空白区切りトークンの集合でなければなりません。 これらのトークンは ロールの定義 ([wai-aria]、5.4節) および グラフィックスロール ([graphics-aria-1.0]、4節) で定義されたロール値です。
SVG要素に割り当てられるWAI-ARIAロールは、role属性を空白で分割したトークンリストの中で最初に有効なロールとなります。 有効なロールとは、その要素型に許可されている、認識される非抽象ロールです。
名前 | 値 | 初期値 | アニメーション可能 |
---|---|---|---|
role | 空白区切りトークンの集合 [HTML] | (下記参照) | no |
‘role’ 属性は 空白区切りトークンの集合であり、 値は ロールの定義 ([wai-aria]、5.4節) で定義されたものです。
ロール値は、要素の目的を定義するための、機械抽出可能な意味情報の空白区切り集合です。
‘role’ 属性の 初期値は各SVG要素ごとに SVG要素の暗黙的ARIAセマンティクスで定義された値です。
有効かつ有用なロールであるためには、多くの要素ロールで、アクセシブルネームや 明示的な 状態・プロパティ値 など追加情報の指定が必要です。 アクセシブルネームはSVGの 記述要素 または ARIA属性で指定できます。 各ロールの要件は、ロールの定義箇所(例:WAI-ARIA ([WAI-ARIA]) や WAI-ARIA Graphics Module ([graphics-aria-1.0]))に示されています。
WAI-ARIAの状態・プロパティ属性はSVG要素で指定可能です。 これらの属性はARIAにより 状態・プロパティの定義(全aria-*属性) ([wai-aria]、6.6節) で定義されています。
これらの属性が指定された場合、その値は 状態またはプロパティの定義の「Value」欄のWAI-ARIA値型であり、 WAI-ARIA値型から言語へのマッピング に従って、SVGの値型に適切に対応づけられる必要があります([wai-aria]、10.2節)。
これらの属性はアニメーション可能です。 グラフィックの状態変更や、正しい代替テキスト記述の内容が変化するような場合にアニメーションを使う場合は、 対応するARIA状態・プロパティ属性も同じ方法で更新されるべきです。
WAI-ARIAの状態・プロパティ属性はどの要素にも使えます。ただし意味を持たない場合もあり、その場合ユーザーエージェントはDOMへの格納以外の処理を行わない場合があります。状態・プロパティ属性は ARIA および SVG Accessibility API Mappings の仕様に従って処理されます。[wai-aria] [svg-aam-1.0]
次の表はSVG要素に適用される暗黙的ARIAセマンティクスのデフォルトを定義します。各言語機能(要素)が最初の列のセルにあり、その行の2列目のセルに示されたARIAセマンティクス(ロール、状態、プロパティ)を暗黙的に持ちます。3列目は、そのWAI-ARIAセマンティクス(ロール、状態、プロパティ)に適用の可否など制約を定義します。
多くのグラフィックス要素では、著者が意味的な重要性を示す情報を提供した場合のみ暗黙ロールが割り当てられます。 アクセシビリティツリーへの包含基準の完全な定義は SVG Accessibility API Mappings仕様で示されています。[svg-aam-1.0] 著者が意味的重要性を示す推奨方法は、要素にアクセシブルネームを与えることです。 これは直接の子として ‘title’ 要素を追加するか、 ‘aria-label’ や ‘aria-labelledby’ 属性を指定することで可能です。 SVGの理解に不可欠なコンテンツ、特にインタラクティブコンテンツには、いずれかの方法でアクセシブルネームを提供してください。
言語機能 | 暗黙的ARIAセマンティクス(デフォルト) | 許可されるロール |
---|---|---|
‘a’ | link ロール
(要素に有効な href または xlink:href 属性がある場合)。
a 要素がリンクでない場合、デフォルトセマンティクスは
tspan (親が text の場合)または g (それ以外の場合)と同じ。
|
制約なし |
‘audio’ | プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) | 指定する場合、ロールはapplication でなければならない |
‘canvas’ | プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) | 制約なし |
‘circle’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘clipPath’ | なし | ロール適用不可 |
‘defs’ | なし | ロール適用不可 |
‘desc’ | なし | ロール適用不可 |
‘ellipse’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘feBlend’ | なし | ロール適用不可 |
‘feColorMatrix’ | なし | ロール適用不可 |
‘feComponentTransfer’ | なし | ロール適用不可 |
‘feComposite’ | なし | ロール適用不可 |
‘feConvolveMatrix’ | なし | ロール適用不可 |
‘feDiffuseLighting’ | なし | ロール適用不可 |
‘feDisplacementMap’ | なし | ロール適用不可 |
‘feDistantLight’ | なし | ロール適用不可 |
‘feDropShadow’ | なし | ロール適用不可 |
‘feFlood’ | なし | ロール適用不可 |
‘feFuncA’ | なし | ロール適用不可 |
‘feFuncB’ | なし | ロール適用不可 |
‘feFuncG’ | なし | ロール適用不可 |
‘feFuncR’ | なし | ロール適用不可 |
‘feGaussianBlur’ | なし | ロール適用不可 |
‘feImage’ | なし | ロール適用不可 |
‘feMerge’ | なし | ロール適用不可 |
‘feMergeNode’ | なし | ロール適用不可 |
‘feMorphology’ | なし | ロール適用不可 |
‘feOffset’ | なし | ロール適用不可 |
‘fePointLight’ | なし | ロール適用不可 |
‘feSpecularLighting’ | なし | ロール適用不可 |
‘feSpotLight’ | なし | ロール適用不可 |
‘feTile’ | なし | ロール適用不可 |
‘feTurbulence’ | なし | ロール適用不可 |
‘filter’ | なし | ロール適用不可 |
‘foreignObject’ | group ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘g’ | group ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘iframe’ | プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) | 指定する場合、ロールはapplication 、document 、img のいずれかでなければならない |
‘image’ | img ロール |
制約なし |
‘line’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘linearGradient’ | なし | ロール適用不可 |
‘marker’ | なし | ロール適用不可 |
‘mask’ | なし | ロール適用不可 |
‘metadata’ | なし | ロール適用不可 |
‘mpath’ | なし | ロール適用不可 |
‘path’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘pattern’ | なし | ロール適用不可 |
‘polygon’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘polyline’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘radialGradient’ | なし | ロール適用不可 |
‘rect’ | graphics-symbol ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘script’ | なし | ロール適用不可 |
‘stop’ | なし | ロール適用不可 |
‘style’ | なし | ロール適用不可 |
‘svg’ | graphics-document ロール |
制約なし |
‘switch’ | なし | ロール適用不可 |
‘symbol’ | graphics-object ロール
(要素が描画される element instance かつ 包含基準を満たす場合)、それ以外は none |
制約なし |
‘text’ | group ロール、
プラットフォーム固有のロールマッピング
(SVG Accessibility API Mappings仕様で定義) |
制約なし |
‘textPath’ | group ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘title’ | なし | ロール適用不可 |
‘tspan’ | group ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘use’ | graphics-object ロール
(要素が 包含基準 を満たす場合)、それ以外は none |
制約なし |
‘video’ | プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) | 指定する場合、ロールはapplication でなければならない |
‘view’ | なし | ロール適用不可 |
DOM Core仕様は Document インターフェースを定義しており、本仕様ではこれを拡張します。
SVG文書が参照によって埋め込まれる場合、 例えばHTML文書内に ‘object’ 要素があり、 その ‘data’ 属性がSVG文書(MIMEタイプが "image/svg+xml" で、ルート要素が ‘svg’ である文書)を参照している場合、2つの異なるDOM階層が存在します。1つ目のDOM階層は参照元文書(例:XHTML文書)用、2つ目のDOM階層は参照先SVG文書用です。
partial interface Document { readonly attribute SVGSVGElement? rootElement; };
rootElement IDL属性は ルートの ‘svg’ 要素を表します。rootElement を取得する際、ルート要素が ‘svg’ の場合はその要素を、そうでなければnullを返します。
この属性は非推奨であり、将来のSVG仕様で削除される可能性があります。著者は documentElement 属性を Document で使うことが推奨されます。
HTMLを実装するSVG実装は DocumentオブジェクトへのHTML拡張に対応しなければなりません。 その他のSVG実装は以下のIDLフラグメントに対応しなければなりません。
// 特定の実装のみ partial interface Document { readonly attribute DOMString title; readonly attribute DOMString referrer; readonly attribute DOMString domain; readonly attribute Element? activeElement; };
title, referrer, domain, activeElement のIDL属性は HTMLで定義されている対応するIDL属性と同じ動作をしなければなりません。
SVGSVGElement オブジェクトは DOM内の ‘svg’ 要素を表します。 SVGSVGElement インターフェースは データ型オブジェクトファクトリメソッドなど、様々なユーティリティメソッドも持ちます。
SVGSVGElement オブジェクトは内部に DOMPoint オブジェクト( current translate point object)を保持します。 このオブジェクトは currentTranslate IDL属性から返されます。
[Exposed=Window] interface SVGSVGElement : SVGGraphicsElement { [SameObject] readonly attribute SVGAnimatedLength x; [SameObject] readonly attribute SVGAnimatedLength y; [SameObject] readonly attribute SVGAnimatedLength width; [SameObject] readonly attribute SVGAnimatedLength height; attribute float currentScale; [SameObject] readonly attribute DOMPointReadOnly currentTranslate; NodeList getIntersectionList(DOMRectReadOnly rect, SVGElement? referenceElement); NodeList getEnclosureList(DOMRectReadOnly rect, SVGElement? referenceElement); boolean checkIntersection(SVGElement element, DOMRectReadOnly rect); boolean checkEnclosure(SVGElement element, DOMRectReadOnly rect); void deselectAll(); SVGNumber createSVGNumber(); SVGLength createSVGLength(); SVGAngle createSVGAngle(); DOMPoint createSVGPoint(); DOMMatrix createSVGMatrix(); DOMRect createSVGRect(); SVGTransform createSVGTransform(); SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix); Element getElementById(DOMString elementId); // 呼び出しても効果がない非推奨メソッド // 互換性維持のため残されている unsigned long suspendRedraw(unsigned long maxWaitMilliseconds); void unsuspendRedraw(unsigned long suspendHandleID); void unsuspendRedrawAll(); void forceRedraw(); }; SVGSVGElement includes SVGFitToViewBox; SVGSVGElement includes SVGZoomAndPan; SVGSVGElement includes WindowEventHandlers;
x, y, width, height のIDL属性は、それぞれ x, y, width, height のプロパティおよび対応するプレゼンテーション属性の計算値を反映します。
currentScale と currentTranslate のIDL属性は ユーザーの拡大・パン操作に応じて文書に適用される変形を表します。詳細は 拡大・パンを参照してください。
文書の拡大・パン変換は [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]という2x3行列です。 ‘transform’ プロパティの値は currentScale や currentTranslate には影響しません。
currentScale を取得する際、以下の手順が実行されます:
currentScale を設定する際、以下の手順が実行されます:
currentTranslate を取得すると、 SVGSVGElement オブジェクトの current translate point object が返されます。 このオブジェクトは 現在の平行移動を表します。 ‘svg’ 要素が 最外縁svg要素でなければ読み取り専用、それ以外では書き込み可能です。
DOMPointへの代入規則も参照。current translate point object を変更すると文書の拡大・パン変換にどう影響するかが記載されています。
文書の拡大・パン変換がユーザー操作で変化した時や 最外縁svg要素が変わった時は、以下の手順が実行されます:
最外縁svg要素が変わった時にこの手順を走らせることで、documentElementが別の ‘svg’ 要素に置換された場合でも currentTranslate が即座に拡大・パン変換の平行移動成分を反映します。
‘svg’ 要素が 最外縁svg要素でなくなった場合、 その current translate point object のx,y成分は0に設定しなければなりません。
‘zoomAndPan’ 属性値は 最外縁svg要素で、ユーザー操作による拡大・パン変換の更新可否のみ制御します。 属性値に関わらず currentScale, currentTranslate は直接変更可能です。
suspendRedraw, unsuspendRedraw, unsuspendRedrawAll, forceRedraw の各メソッドは全て非推奨で、呼び出しても何も効果がありません。suspendRedrawは1を返す必要があります。
getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure の各メソッドは、グラフィックス要素に対して、グラフィックス内容が指定した矩形内に部分的または完全に含まれる要素の検索や判定に使います。
要素 element の子孫のうち、矩形 rectangle で ancestor の座標空間で判定する 交差・包含子孫の検索は、以下の手順で行います:
このためuse要素シャドウツリー内の要素は見るが、element instanceやその対応する要素は result リストに入れず、‘use’ 要素自身のみ返す。
指定した要素 element 内の非コンテナグラフィックス要素の検索は、以下の手順で行う:
getIntersectionList(rect, referenceElement) または getEnclosureList(rect, referenceElement) が呼ばれると、以下の手順が実行される:
checkIntersection(element, rect) または checkEnclosure(element, rect) が呼ばれると、以下の手順が実行される:
deselectAll メソッドは文書から選択状態をすべて解除するためのものです。deselectAll() を呼ぶと、文書の Range が全て Selection から削除され、Selection の direction が forwards に設定されます。[DOM][EDITING] このメソッドはSelection APIの機能重複のため非推奨です。
これは document.getSelection().removeAllRanges()
をこの ‘svg’
要素が属する文書で呼ぶのと同じです。
createSVGNumber, createSVGLength, createSVGAngle, createSVGPoint, createSVGMatrix, createSVGRect, createSVGTransform の各メソッドは、特定型の新しいデータ型オブジェクト作成用のファクトリ関数です。呼び出した時は以下の表に従い新しいオブジェクトを返します:
メソッド | オブジェクトと詳細 |
---|---|
createSVGNumber | 値が0の新しい デタッチされた SVGNumber オブジェクト。 |
createSVGLength | 値が単位なしの <number> 0である新しい デタッチされた SVGLength オブジェクト。 |
createSVGAngle | 値が単位なしの <number> 0である新しい デタッチされた SVGAngle オブジェクト。 |
createSVGPoint | 座標が全て0の新しい デタッチされた DOMPoint オブジェクト。 |
createSVGMatrix | 単位行列を表す新しい デタッチされた DOMMatrix オブジェクト。 |
createSVGRect | x, y, width, heightが全て0の新しい DOMRect オブジェクト。 |
createSVGTransform | 値が matrix(1, 0, 0, 1, 0, 0) の新しい デタッチされた SVGTransform オブジェクト。 |
createSVGPoint、 createSVGMatrix、 createSVGRect の各メソッドはすべて非推奨で、レガシーコンテンツとの互換性のために残されています。 著者は DOMPoint、DOMMatrix、DOMRect の各コンストラクタを使うことが推奨されます。
createSVGTransformFromMatrix メソッドは、行列オブジェクトから新しい SVGTransform オブジェクトを作成するためのものです。 挙動は SVGTransformListのcreateSVGTransformFromMatrix メソッドと同じです。
SVGGElement オブジェクトはDOM内の ‘g’ 要素を表します。
[Exposed=Window] interface SVGGElement : SVGGraphicsElement { };
SVGUnknownElement オブジェクトはSVG名前空間内の未知の要素を表します。
[Exposed=Window] interface SVGUnknownElement : SVGGraphicsElement { };
SVGDefsElement オブジェクトはDOM内の ‘defs’ 要素を表します。
[Exposed=Window] interface SVGDefsElement : SVGGraphicsElement { };
SVGDescElement オブジェクトはDOM内の ‘desc’ 要素を表します。
[Exposed=Window] interface SVGDescElement : SVGElement { };
SVGMetadataElement オブジェクトはDOM内の ‘metadata’ 要素を表します。
[Exposed=Window] interface SVGMetadataElement : SVGElement { };
SVGTitleElement オブジェクトはDOM内の ‘title’ 要素を表します。
[Exposed=Window] interface SVGTitleElement : SVGElement { };
SVGSymbolElement オブジェクトはDOM内の ‘symbol’ 要素を表します。
[Exposed=Window] interface SVGSymbolElement : SVGGraphicsElement { }; SVGSymbolElement includes SVGFitToViewBox;
SVG 2で追加。 SVGSymbolElement インターフェースは SVGGraphicsElement を継承するようになり、シャドウDOMでインスタンス化された symbol をグラフィックス要素として問い合わせ可能になりました。
SVGUseElement オブジェクトは、DOM内の ‘use’ 要素を表します。
[Exposed=Window] interface SVGUseElement : SVGGraphicsElement { [SameObject] readonly attribute SVGAnimatedLength x; [SameObject] readonly attribute SVGAnimatedLength y; [SameObject] readonly attribute SVGAnimatedLength width; [SameObject] readonly attribute SVGAnimatedLength height; [SameObject] readonly attribute SVGElement? instanceRoot; [SameObject] readonly attribute SVGElement? animatedInstanceRoot; }; SVGUseElement includes SVGURIReference;
x, y, width, height のIDL属性は、それぞれ x, y, width, height のプロパティおよび対応するプレゼンテーション属性の計算値を反映します。
instanceRoot と
animatedInstanceRoot
のIDL属性は、どちらも インスタンスルート(この要素のシャドウルートの直接の子となる SVGElementInstance)を指します。
(u.instanceRoot
は u.shadowRoot.firstChild
を取得するのと同じです)。
この要素にシャドウツリーが存在しない場合
(例えば、URIが無効だったり、条件付き処理で無効化された場合など)、
これらの属性を取得するとnullが返されます。
各 use要素シャドウツリー のルートオブジェクトは SVGUseElementShadowRoot インターフェースを実装します。 このインターフェースは現在、ShadowRoot インターフェースおよび DocumentOrShadowRoot ミックスインで定義されたプロパティやメソッドへの拡張を定義していません。 ただし、このノードをルートとするツリーは、著者スクリプト側からは完全に読み取り専用です。
[Exposed=Window] interface SVGUseElementShadowRoot : ShadowRoot { };
SVGElementInstance インターフェースは、SVGElement インターフェースへの拡張を定義します。 これは use要素シャドウツリー内の要素にのみ使用されます。
以前のSVGバージョンでは、 SVG要素インスタンスは非要素オブジェクトとして定義されており、 有効なイベントターゲットでしたが、完全なDOMノードではありませんでした。 本仕様では use要素シャドウツリー をShadow DOM仕様と整合するように再定義しており、 インスタンスは実際のSVGElementオブジェクトです。 このインターフェースは後方互換のために不足機能を追加するものです。 ただし、著者は互換性が完全でないことに留意し、スクリプト設計を行うべきです。 また、シャドウツリー内のHTML名前空間要素オブジェクトではこれらのプロパティは利用できません。
interface mixin SVGElementInstance { [SameObject] readonly attribute SVGElement? correspondingElement; [SameObject] readonly attribute SVGUseElement? correspondingUseElement; };
correspondingElement IDL属性は、 この要素が use要素シャドウツリー内の element instance である場合に 対応する要素 を指します。そうでなければnullです。
参照要素が外部ファイル内にある場合、
このポインタの存在は、その外部ファイルの全DOMをメモリに保持する必要があることを意味します。
しかし、現行標準の仕様では外部DOMは読み取り専用です。
したがって機能は限定的で、パフォーマンスへの影響が大きい可能性があります。
実装者からのフィードバック待ちですが、
著者は外部ファイル参照で correspondingElement
を用いる場合はリスクがあると考慮してください。
correspondingUseElement IDL属性は、 この要素が use要素シャドウツリー内の element instance である場合に 対応するuse要素 を指します。そうでなければnullです。
ShadowAnimation インターフェースは、Animation オブジェクト(読み取り専用)を定義します。 これは、構築元となった sourceAnimation オブジェクトの全変更をミラーします。 use要素シャドウツリー内で、著者によるアニメーションオブジェクトをミラーするために用いられます。
[Constructor(Animation source, Animatable newTarget), Exposed=Window] interface ShadowAnimation : Animation { [SameObject] readonly attribute Animation sourceAnimation; };
sourceAnimation IDLプロパティは、 コンストラクタで渡された Animation オブジェクトを指します。
コンストラクタは新しい ShadowAnimation
オブジェクトを生成し、
sourceAnimation のすべてのプロパティを反映しますが、
effect
は
KeyframeEffectReadOnly
を新しく構築して
そのソースに sourceAnimation のキーフレームエフェクトを使い、
target
プロパティは newTarget
パラメータと一致するよう変更されます。
ShadowAnimation は読み取り専用です。
継承したIDLプロパティに値をセットしたり、
状態を変更する Animation メソッドを呼び出すと
NoModificationAllowedError
を投げなければなりません。
ただし、ユーザーエージェントは
sourceAnimation のプロパティや状態の変更を
ShadowAnimation
に反映することを保証しなければなりません。
SVGSwitchElement オブジェクトは、DOM内の ‘switch’ 要素を表します。
[Exposed=Window] interface SVGSwitchElement : SVGGraphicsElement { };
このインターフェースは、他のDOMベース言語から参照埋め込みされたSVG文書へのアクセスを提供します。想定される実装は、SVG文書参照を許可するDOMオブジェクト上です。
このインターフェースは非推奨であり、将来のSVG仕様から削除される可能性があります。‘iframe’や
‘object’ 要素内のSVG文書にアクセスする場合、著者はそれぞれ HTMLIFrameElement
や HTMLObjectElement
インターフェースの contentDocument
属性を使うことが推奨されます。
HTMLIFrameElement、 HTMLEmbedElement および HTMLObjectElement インターフェースは、それぞれ独自に getSVGDocument メソッドを定義しており、 GetSVGDocument と同様にSVG文書へアクセス可能です。 したがって、これら3つのインターフェースは GetSVGDocument を実装する必要はありません。 それでも、著者は contentDocument の利用を強く推奨します。
interface mixin GetSVGDocument { Document getSVGDocument(); };
getSVGDocument メソッドは参照されたSVG文書を返すためのものです。getSVGDocument() を呼び出すと、埋め込み要素が実装する GetSVGDocument インターフェースによって参照されている Document オブジェクトを返します。文書が存在しない場合はnullが返されます。
このメソッドは参照先がSVG文書かどうかのチェックは行いません。代わりに、任意の文書が返されます。