目次詳細目次前章次章要素属性プロパティ

23 拡張性

目次

23.1 外部名前空間と外部データ

SVG においては、 SVG 内容のどこにでも,外部の名前空間による要素を含めることが許容される。 一般に、 SVG-UA は未知な要素を DOM に含めるが,それ以外の点では無視する(注意すべき例外は 外部の型のオブジェクトの埋め込み で述べられる)。 SVG allows inclusion of elements from foreign namespaces anywhere with the SVG content. In general, the SVG user agent will include the unknown elements in the DOM but will otherwise ignore unknown elements. (The notable exception is described under Embedding Foreign Object Types.)

更に, SVG においては、任意の SVG 要素に外部の名前空間による属性を含めることが許容される。 一般に SVG-UA は、未知な属性は DOM に組み入れるが,それ以外の部分は無視する。 Additionally, SVG allows inclusion of attributes from foreign namespaces on any SVG element. The SVG user agent will include unknown attributes in the DOM but with otherwise ignore unknown attributes.

外部の名前空間を含められる SVG の能力には次の目的がある: SVG's ability to include foreign namespaces can be used for the following purposes:

例えばビジネスグラフィックスの文書作成アプリケーションは、 SVG 文書内に何らかのプライベートデータを含ませ,読込み時に図表(下の例の場合は円グラフ)が正しく組み上げられるようにすることを望むかもしれない: To illustrate, a business graphics authoring application might want to include some private data within an SVG document so that it could properly reassemble the chart (a pie chart in this case) upon reading it back in:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
     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>

23.2 外部の型のオブジェクトの埋め込み

SVG の目標の一つは、他の XML 言語プロセッサが SVG 内容木の与えられた場所において現在有効な種々の変換と組成パラメタに従って,その SVG の描画区域に出力できる仕組を提供する所にある。 一つの特殊な例として、 CSS または XSL によりスタイル付けされた XML 内容に対し, SVG 内容のどこかに( SVG による変換法と組成法に従って)動的にテキストを流し込めるようなフレームを提供することが挙げられる。 別の例としては MathML [MATHML] による数式を SVG の絵図に挿入することが挙げられる。 One goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active at a given point within the SVG content tree. One particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of some SVG content. Another example is inserting a MathML expression into an SVG drawing [MATHML].

foreignObject 要素には、グラフィック内容が別の UA により描画されるような,外部の名前空間のものを含ませることができる。 この含められた外部のグラフィック内容は SVG の変換と組成の対象になる。 The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

foreignObject の内容は別の名前空間に属するものとみなされる。 foreignObject 内の任意の SVG 要素は、適切に定義された下位の SVG 文書が適切な xmlns 属性( XML 名前空間 ([XML-NS]) 参照)の指定を伴なって再帰的に埋めこまれている状況を除き,描画されないことになる。 そのような状況の一つは、 SVG 文書片が別の非 SVG 文書片内に埋めこまれており,それがまた別の SVG 文書片内に埋めこまれるような場合である(例えば SVG 文書片が XHTML 文書片を含んでいて,それがまた別の SVG 文書片を含んでいるなど)。 The contents of ‘foreignObject’ are assumed to be from a different namespace. Any SVG elements within a ‘foreignObject’ will not be drawn, except in the situation where a properly defined SVG subdocument with a proper ‘xmlns’ (see Namespaces in XML [XML-NS]) attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).

通常, foreignObject の利用においては、 UA からのサポートの有無を正しく確認し,そのサポートが無い場合の代替描画を提供するための switch 要素と requiredExtensions 属性を伴うことになる。 Usually, a ‘foreignObject’ will be used in conjunction with the ‘switch’ element and the ‘requiredExtensions’ attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.

23.3 foreignObject 要素

foreignObject
分類:
None
内容モデル:
任意の要素または文字データ
属性:
DOM インタフェース:

属性定義

x = "<coordinate>"
foreignObject の内容に関連するグラフィックが描画される矩形領域の第一頂点の x 座標。 The x-axis coordinate of one corner of the rectangular region into which the graphics associated with the contents of the ‘foreignObject’ will be rendered.
この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.
アニメーション:
y = "<coordinate>"
参照先の文書が描画される矩形領域の第一頂点の y 座標。 The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.
アニメーション:
width = "<length>"
参照先の文書が描画される矩形領域の幅。 The width of the rectangular region into which the referenced document is placed.
負値はエラー( エラー処理 を見よ)。 値 0 が指定された場合、要素の描画はされなくなる。 A negative value is an error (see Error processing). A value of zero disables rendering of the element.
アニメーション:
height = "<length>"
参照先の文書が描画される矩形領域の高さ。 The height of the rectangular region into which the referenced document is placed.
負値はエラー( エラー処理 を見よ)。 値 0 が指定された場合、要素の描画はされなくなる。 A negative value is an error (see Error processing). A value of zero disables rendering of the element.
アニメーション:

23.4 例

例を示す: Here is an example:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <desc>この例は 'switch' 要素を用いて XMHTML がサポート
        されていない場合に備え、段落のグラフィック表現も与える。
        </desc>
  <!-- 'switch' 要素はテスト属性を順に評価して
       真になる最初の子要素の処理をする -->
  <switch>
    <!-- 埋込まれた XHTML に対し requiredExtensions 属性が真と評価されるならば
         (すなわち、 UA が SVG に埋込まれた XHTML をサポートするならば)その処理を行う。 -->
    <foreignObject width="100" height="50"
                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
      <!-- XHTML 内容がここに -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>ここに行の折り返しを要する段落がある。</p>
      </body>
    </foreignObject>
    <!-- そうでなければ、以下の代替 SVG の処理が行われる。
          'text' 要素にはテスト属性が与えられていないことに注意。
         テスト属性が与えられていない場合、真と評価される
         テスト属性が存在しているものとみなされる。 -->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">ここに行の折り返しを</tspan>
      <tspan x="10" y="20">要する段落がある。</tspan>
    </text>
  </switch>
</svg>

SVG-UA には、埋めこまれた外部の型のオブジェクトを他の何らかの UA に処理させることは要求されていない。 しかしながら,すべての適合 SVG-UA は、 switch 要素をサポートし,その要素内に代替表示として現れる SVG 要素が有効なものであれば,それを描画しなければならない。 It is not required that SVG user agent support the ability to invoke other arbitrary user agents to handle embedded foreign object types; however, all conforming SVG user agents would need to support the ‘switch’ element and must be able to render valid SVG elements when they appear as one of the alternatives within a ‘switch’ element.

最終的には、商用のウェブブラウザには、 SVG の中に CSS や XSL を利用する他の XML 言語による内容を埋めこみ, CSS / XSL により整形された結果が SVG による変換と組成に従って処理されるような機能をサポートすることが見込まれている。 現時点においてはそのような能力は要求されていないが。 Ultimately, it is expected that commercial Web browsers will support the ability for SVG to embed content from other XML grammars which use CSS or XSL to format their content, with the resulting CSS- or XSL-formatted content subject to SVG transformations and compositing. At this time, such a capability is not a requirement.

23.5 外部の要素と属性の DTD への追加

拡張の仕組みに外部の名前空間を利用すれば適応性が得られ,すでに NVDL や RelaxNG のような妥当性検証の技術は対応しているが、 DTD による妥当性検証については DTD に明示的な拡張の仕組みが備わっていない限り,概して不具合が生ずる。 Using foreign namespaces as an extension mechanism adds flexibility, is readily handled by validation technologies like NVDL and RelaxNG, but typically breaks DTD validation unless the DTD has explicit extensibility hooks.

SVG の DTD は、内部 DTD サブセットによる SVG 言語の拡張を許容している。 内部 DTD サブセットにおいては、ほとんどの SVG 要素に対し,独自の要素や属性の追加が許容されている。 この便宜性を DTD による妥当性検証が望まれる場合に利用できる。 The SVG DTD allows for extending the SVG language within the internal DTD subset. Within the internal DTD subset, you have the ability to add custom elements and attributes to most SVG elements. This facility may be used if DTD validation is desired.

SVG の DTD では、ほとんどの SVG 要素において拡張実体( extension entity )を定義している。 例えば view 要素は DTD において次のように定義されている: The DTD defines an extension entity for most of SVG elements. For example, the ‘view’ element is defined in the DTD as follows:

<!ENTITY % SVG.view.extra.content "" >

<!ENTITY % SVG.view.element "INCLUDE" >
<![%SVG.view.element;[
<!ENTITY % SVG.view.content
    "( %SVG.Description.class; %SVG.view.extra.content; )*"
>
<!ELEMENT %SVG.view.qname; %SVG.view.content; >
<!-- end of SVG.view.element -->]]>

<!ENTITY % SVG.view.attlist "INCLUDE" >
<![%SVG.view.attlist;[
<!ATTLIST %SVG.view.qname;
    %SVG.Core.attrib;
    %SVG.External.attrib;
    viewBox %ViewBoxSpec.datatype; #IMPLIED
    preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
    zoomAndPan ( disable | magnify ) 'magnify'
    viewTarget CDATA #IMPLIED
>
<!-- end of SVG.view.attlist -->]]>

与えられた文書の 内部 DTD サブセットにおいて実体 SVG.view.extra.content を定義することにより、 view 要素に独自の下位要素属性を追加できる。 また、独自の属性の追加には <!ATTLIST> を利用できる。 例えば次では、追加の子要素 customNS:customElement と追加の属性 customNS:customAttr を与えて, view 要素を拡張している: The entity SVG.view.extra.content can be defined in the internal DTD subset to add custom sub-elements attributes to the ‘view’ element within a given document, and an <!ATTLIST> can be used to add custom attributes. For example, the following extends the ‘view’ element with an additional child element ‘customNS:customElement’ and an additional attribute ‘customNS:customAttr’:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY % SVG.view.extra.content  "| customNS:customElement" >
<!ATTLIST %SVG.view.qname;
  xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
  customNS:customAttr CDATA #IMPLIED>
<!ELEMENT customNS:customElement EMPTY>
<!ATTLIST customNS:customElement
  xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
  info CDATA #IMPLIED>
]>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="8cm" height="4cm">
  <desc>内部 DTD サブセットにより 'view' 要素を拡張する。</desc>
  <!-- 何か斬新なグラフィックがここに置かれるらしい。 -->
  <view viewBox="100 110 20 30" customNS:customAttr="123">
    <customNS:customElement info="abc"/>
  </view>
</svg>

23.6 DOM インタフェース

23.6.1 インタフェース SVGForeignObjectElement

SVGForeignObjectElement インタフェースは foreignObject 要素に対応する。 The SVGForeignObjectElement interface corresponds to the ‘foreignObject’ element.

interface SVGForeignObjectElement : SVGElement,
                                    SVGTests,
                                    SVGLangSpace,
                                    SVGExternalResourcesRequired,
                                    SVGStylable,
                                    SVGTransformable {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
};
属性
x (readonly SVGAnimatedLength)
与えられた foreignObject 要素の x 属性に対応する。 Corresponds to attribute ‘x’ on the given ‘foreignObject’ element.
y (readonly SVGAnimatedLength)
与えられた foreignObject 要素の y 属性に対応する。 Corresponds to attribute ‘y’ on the given ‘foreignObject’ element.
width (readonly SVGAnimatedLength)
与えられた foreignObject 要素の width 属性に対応する。 Corresponds to attribute ‘width’ on the given ‘foreignObject’ element.
height (readonly SVGAnimatedLength)
与えられた foreignObject 要素の height 属性に対応する。 Corresponds to attribute ‘height’ on the given ‘foreignObject’ element.
目次詳細目次前章次章要素属性プロパティ