13 グラデーションとパターン

目次

• 13.1 概要
• 13.2 グラデーション
  • 13.2.1 グラデーションの概要
  • 13.2.2 線型グラデーション
  • 13.2.3 放射型グラデーション
  • 13.2.4 グラデーションストップ
• 13.3 パターン
• 13.4 Gradient モジュール
• 13.5 Pattern モジュール
• 13.6 DOM インターフェース

• 13.1 Introduction
• 13.2 Gradients
  • 13.2.1 Introduction
  • 13.2.2 Linear Gradients
  • 13.2.3 Radial Gradients
  • 13.2.4 Gradient stops
• 13.3 Patterns
• 13.4 Gradient Module
• 13.5 Pattern Module
• 13.6 DOM interfaces

13.1 概要

SVG においては、図形とテキストに対し、次のいずれかを用いてフィル（即ち内部への塗り）およびストローク（即ち外形線への塗り）を適用することができる：

With SVG, you can fill (i.e., paint the interior) or stroke (i.e., paint the outline) of shapes and text using one of the following:

• 色 （<color> または 'solidColor' 要素 を利用）
• color (using <color> or the 'solidColor' element)
• グラデーション （線型または放射型）
• gradients (linear or radial)
• パターン （ベクターまたは画像, 敷詰め可）
• patterns (vector or image, possibly tiled)

SVG ペイントサーバ という考え方を用いる。 グラデーションとパターンは組み込みのペイントサーバの一種に過ぎない。 'solidColor' 要素はまた別の組み込みのペイントサーバであり、 色 で述べられている。 （ エラータ ：原文の "solid color" はこの仕様には存在しない旧草案の名残。 変更履歴 も参照。）

SVG uses the general notion of a paint server. Gradients and patterns are just specific types of built-in paint servers. The 'solidColor' element is another built-in paint server, described in Color.

ペイントサーバは 'fill' あるいは 'stroke' プロパティの URI 参照 により参照される。

Paint servers are referenced using a URI reference on a 'fill' or 'stroke' property.

13.2 グラデーション

13.2.1 グラデーションの概要

グラデーションとはベクトルに沿った色から色への連続的な滑らかな色の変化である。同じベクトルに沿って更に別の色へと変化させることも可能である。 SVG は２種類のグラデーション 線型グラデーション （ linear gradients ）と 放射型グラデーション （ radial gradients ）を提供する。

Gradients consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. SVG provides for two types of gradients, linear gradients and radial gradients.

いったんグラデーションが定義されれば、 グラフィックス要素 の 'fill' あるいは 'stroke' プロパティからの参照により、その要素のフィルおよびストロークにグラデーションを用いることが可能になる。

Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.

13.2.2 線型グラデーション

線型グラデーションは 'linearGradient' 要素で定義される。
 

Linear gradients are defined by a 'linearGradient' element.
 

<!ENTITY % SVG.linearGradient.extra.content "" >
<!ENTITY % SVG.linearGradient.element "INCLUDE" >
<![%SVG.linearGradient.element;[
<!ENTITY % SVG.linearGradient.content
    "(( %SVG.Description.class; )*, ( %SVG.stop.qname; | %SVG.animate.qname;
      | %SVG.set.qname; | %SVG.animateTransform.qname;
        %SVG.linearGradient.extra.content; )*)"
>
<!ELEMENT %SVG.linearGradient.qname; %SVG.linearG\
radient.content; >
<!-- end of SVG.linearGradient.element -->]]>
<!ENTITY % SVG.linearGradient.attlist "INCLUDE" >
<![%SVG.linearGradient.attlist;[
<!ATTLIST %SVG.linearGradient.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    x1 %Coordinate.datatype; #IMPLIED
    y1 %Coordinate.datatype; #IMPLIED
    x2 %Coordinate.datatype; #IMPLIED
    y2 %Coordinate.datatype; #IMPLIED
    gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    gradientTransform %TransformList.datatype; #IMPLIED
    spreadMethod ( pad | reflect | repeat ) #IMPLIED
>

パーセントを x1, y1, x2, y2 に指定しても良い。 gradientUnits="userSpaceOnUse" の場合、パーセントは現在のビューポートに相対的な値を表す。 gradientUnits="objectBoundingBox" の場合、パーセントはオブジェクトの包含ボックスに相対的な値を表す。

Percentages are allowed for x1, y1, x2, y2. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.

x1 = x2, y1 = y2 の場合、最後の グラデーションストップ の色と不透明度を用いた単色で領域が塗られる。

If x1 = x2 and y1 = y2, then the area to be painted will be painted as a single color using the color and opacity of the last gradient stop.

プロパティ は祖先から 'linearGradient' 要素に継承されるが、 'linearGradient' 要素を参照する要素からは継承されない。

Properties inherit into the 'linearGradient' element from its ancestors; properties do not inherit from the element referencing the 'linearGradient' element.

'linearGradient' 要素は決して直接描画されることはなく、 'fill' あるいは 'stroke' プロパティからの参照以外に使い道はない。 'display' プロパティは 'linearGradient' 要素に適用されない。すなわち、 'linearGradient' 要素は 'display' プロパティの値が none 以外であっても直接描画されることはなく、たとえ要素自身あるいはその祖先において 'display' プロパティの値が none であっても参照による利用が可能である。

'linearGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'linearGradient' element; thus, 'linearGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'linearGradient' elements are available for referencing even when the 'display' property on the 'linearGradient' element or any of its ancestors is set to none.

Example lingrad01 に線型グラデーション・ペイントサーバの参照による矩形のフィルを示す。

Example lingrad01 shows how to fill a rectangle by referencing a linear gradient paint server.

<?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">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example lingrad01 -
           線型グラデーション・ペイントサーバによる矩形のフィル</desc>
  <g>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <!-- 描画領域の枠を青色にする -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <!-- 矩形の内部は線型グラデーション・ペイントサーバを用いて塗られる -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>

Example lingrad01

この例を SVG で見る（ SVG 対応ブラウザのみ）
 

13.2.3 放射型グラデーション

放射型グラデーションは 'radialGradient' 要素により定義される。
 

Radial gradients are defined by a 'radialGradient' element.
 

<!ENTITY % SVG.radialGradient.extra.content "" >
<!ENTITY % SVG.radialGradient.element "INCLUDE" >
<![%SVG.radialGradient.element;[
<!ENTITY % SVG.radialGradient.content
    "(( %SVG.Description.class; )*, ( %SVG.stop.qname; | %SVG.animate.qname;
      | %SVG.set.qname; | %SVG.animateTransform.qname;
        %SVG.radialGradient.extra.content; )*)"
>
<!ELEMENT %SVG.radialGradient.qname; %SVG.radialG\
radient.content; >
<!-- end of SVG.radialGradient.element -->]]>
<!ENTITY % SVG.radialGradient.attlist "INCLUDE" >
<![%SVG.radialGradient.attlist;[
<!ATTLIST %SVG.radialGradient.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    cx %Coordinate.datatype; #IMPLIED
    cy %Coordinate.datatype; #IMPLIED
    r %Length.datatype; #IMPLIED
    fx %Coordinate.datatype; #IMPLIED
    fy %Coordinate.datatype; #IMPLIED
    gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    gradientTransform %TransformList.datatype; #IMPLIED
    spreadMethod ( pad | reflect | repeat ) #IMPLIED
>

パーセントを cx, cy, r, fx, fy に指定しても良い。 gradientUnits="userSpaceOnUse" の場合、パーセントは現在のビューポートに相対的な値を表す。 gradientUnits="objectBoundingBox" の場合、パーセントはオブジェクトの包含ボックスに相対的な値を表す。

Percentages are allowed for attributes cx, cy, r, fx and fy. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.

もし fx, fy で定義される焦点が cx, cy, r で定義される円の外側にある場合、ＵＡは焦点を (cx, cy) から (fx, fy) への直線と cx, cy, r で定義される円の交点に設定するものとする。

If the point defined by fx and fy lies outside the circle defined by cx, cy and r, then the user agent shall set the focal point to the intersection of the line from ( cx, cy) to ( fx, fy) with the circle defined by cx, cy and r.

プロパティ は祖先から 'radialGradient' 要素に継承されるが、 'radialGradient' 要素を参照する要素からは継承されない。

Properties inherit into the 'radialGradient' element from its ancestors; properties do not inherit from the element referencing the 'radialGradient' element.

'radialGradient' 要素は決して直接描画されることはなく、 'fill' あるいは 'stroke' プロパティからの参照以外の使い方はない。 'display' プロパティは 'radialGradient' 要素に適用されない。すなわち、 'radialGradient' 要素は 'display' プロパティの値が none 以外であっても直接描画されることはなく、 'radialGradient' 要素あるいはその祖先において 'display' プロパティが none に設定されていても 'radialGradient' 要素を参照して利用することができる。

'radialGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'radialGradient' element; thus, 'radialGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'radialGradient' elements are available for referencing even when the 'display' property on the 'radialGradient' element or any of its ancestors is set to none.

Example radgrad01 に線型グラデーション・ペイントサーバの参照による矩形のフィルを示す。

Example radgrad01 shows how to fill a rectangle by referencing a radial gradient paint server.

<?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">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example radgrad01 - 
           放射型グラデーション・ペイントサーバによる矩形のフィル</desc>
  <g>
    <defs>
      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>
    <!-- 描画領域の枠を青色にする -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <!-- 矩形の内部は放射型グラデーション・ペイントサーバを用いて塗られる -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>

Example radgrad01

この例を SVG で見る（ SVG 対応ブラウザのみ）
 

13.2.4 グラデーションストップ

グラデーションで利用される色の勾配は 'linearGradient' 要素あるいは 'radialGradient' 要素の子要素となる 'stop' 要素で定義される。

The ramp of colors to use on a gradient is defined by the 'stop' elements that are child elements to either the 'linearGradient' element or the 'radialGradient' element.

<!ENTITY % SVG.stop.extra.content "" >
<!ENTITY % SVG.stop.element "INCLUDE" >
<![%SVG.stop.element;[
<!ENTITY % SVG.stop.content
    "( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
       %SVG.stop.extra.content; )*"
>
<!ELEMENT %SVG.stop.qname; %SVG.stop.content; >
<!-- end of SVG.stop.element -->]]>
<!ENTITY % SVG.stop.attlist "INCLUDE" >
<![%SVG.stop.attlist;[
<!ATTLIST %SVG.stop.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    offset %NumberOrPercentage.datatype; #REQUIRED
>

'stop-color' プロパティはグラデーションストップにおいて利用される色を指示する。 'fill' および 'stroke' プロパティにおける <paint> の指定と同様、キーワード currentColor と ICC カラーを指定することができる。

The 'stop-color' property indicates what color to use at that gradient stop. The keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the 'fill' and 'stroke' properties.

'stop-opacity' プロパティはグラデーションストップにおける不透明度を定義する。

The 'stop-opacity' property defines the opacity of a given gradient stop.

グラデーションにおけるいくつかの注意：

Some notes on gradients:

• ０あるいは 0% より小さいグラデーションの offset 値は 0% に切り上げられる。 １あるいは 100% より大きいグラデーションの offset 値は 100% に切り下げられる。
• Gradient offset values less than 0 (or less than 0%) are rounded up to 0%. Gradient offset values greater than 1 (or greater than 100%) are rounded down to 100%.
• グラデーションの効果が得られるようにするためには少なくとも２つ以上のストップが定義されている必要がある。ストップが定義されていない場合、塗りの指定に 'none' が設定されたものとして塗りが行われるものとする。ストップが一つだけ定義されている場合、そのグラデーションストップで定義されている色による一様な塗りが行われる。
• It is necessary that at least two stops defined to have a gradient effect. If no stops are defined, then painting shall occur as if 'none' were specified as the paint style. If one stop is defined, then paint with the solid color fill using the color defined for that gradient stop.
• グラデーションにおける各グラデーションストップの offset 値は前の offset 値以上でなければならない。もし offset 値が前に現れる offset 値のいずれかより小さい場合、その offset 値はそれら offset 値の最大値に調整される。
• Each gradient offset value is required to be equal to or greater than the previous gradient stop's offset value. If a given gradient stop's offset value is not equal to or greater than all previous offset values, then the offset value is adjusted to be equal to the largest of all previous offset values.
• ２つのグラデーションストップが同じ offset 値を持つ場合、後の方のグラデーションストップが境目から後の色を制御する。特に：

  <stop offset="0" stop-color="white"/>
  <stop offset=".2" stop-color="red"/>
  <stop offset=".2" stop-color="blue"/>
  <stop offset="1" stop-color="black"/>
  

  の効果はほぼ次と同じである：

  <stop offset="0" stop-color="white"/>
  <stop offset=".1999999999" stop-color="red"/>
  <stop offset=".2" stop-color="blue"/>
  <stop offset="1" stop-color="black"/>
  

  すなわち、グラデーションは白色から赤色へ滑らかに移行し、急激に赤色から青色に転移し、青色から黒色へ滑らかに移行する。
• If two gradient stops have the same offset value, then the latter gradient stop controls the color value at the overlap point. In particular:

  <stop offset="0" stop-color="white"/>
  <stop offset=".2" stop-color="red"/>
  <stop offset=".2" stop-color="blue"/>
  <stop offset="1" stop-color="black"/>
  

  will have approximately the same effect as:

  <stop offset="0" stop-color="white"/>
  <stop offset=".1999999999" stop-color="red"/>
  <stop offset=".2" stop-color="blue"/>
  <stop offset="1" stop-color="black"/>
  

  which is a gradient that goes smoothly from white to red, then abruptly shifts from red to blue, and then goes smoothly from blue to black.

13.3 パターン

パターンは、あらかじめ定義されたグラフィックオブジェクトによるオブジェクトのフィルおよびストロークに利用され、塗り領域を覆うために一定の間隔 x, y で繰り返すことができる（「敷詰められる」）。 パターンは 'pattern' 要素で定義される。パターンを グラフィックス要素 のフィルあるいはストロークに用いることを指示するには、その 'fill' あるいは 'stroke' プロパティから 'pattern' 要素を参照する。

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a 'pattern' element and then referenced by properties 'fill' and 'stroke' on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern.

属性 x, y, width, height, patternUnits は無限に拡がるキャンバス上に基準となる矩形を定義する。基準矩形の左上は (x, y) に、右下は (x + width, y + height) に位置する。敷詰めは理論上、整数 m, n に対する座標 (x + m* width,  y  + n* height) を開始位置とする基準矩形の連続を、全ての整数 m, n に渡りＸ軸Ｙ軸両方向（正負両方）に無限に拡げることである。

Attributes x, y, width, height and patternUnits define a reference rectangle somewhere on the infinite canvas. The reference rectangle has its top/left at ( x, y) and its bottom/right at ( x+ width, y+ height). The tiling theoretically extends a series of such rectangles to infinity in X and Y (positive and negative), with rectangles starting at ( x + m* width,  y + n* height) for each possible integer value for m and n.

<!ENTITY % SVG.pattern.extra.content "" >
<!ENTITY % SVG.pattern.element "INCLUDE" >
<![%SVG.pattern.element;[
<!ENTITY % SVG.pattern.content
    "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
       %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
       %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
       %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
       %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
       %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
       %SVG.Font.class; %SVG.Extensibility.class; %SVG.pattern.extra.content; )*"
>
<!ELEMENT %SVG.pattern.qname; %SVG.pattern.content; >
<!-- end of SVG.pattern.element -->]]>
<!ENTITY % SVG.pattern.attlist "INCLUDE" >
<![%SVG.pattern.attlist;[
<!ATTLIST %SVG.pattern.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Presentation.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    x %Coordinate.datatype; #IMPLIED
    y %Coordinate.datatype; #IMPLIED
    width %Length.datatype; #IMPLIED
    height %Length.datatype; #IMPLIED
    patternUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    patternContentUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    patternTransform %TransformList.datatype; #IMPLIED
    viewBox %ViewBoxSpec.datatype; #IMPLIED
    preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>

SVG の ＵＡスタイルシート においては 'pattern' 要素に対する 'overflow' プロパティは hidden に設定されているので、パターンタイルの境界に矩形のクリッピングパスが作成される。 'overflow' プロパティが上書きされない限り、パターンの矩形の外側にはみ出るパターンのグラフィックは切り取られる。 （ エラータ ：次を挿入） 'overflow' プロパティが visible に設定されている場合のパターンの描画のふるまいは未定義であることに注意。 下の Example pattern01 にパターンタイルのクリッピングによる効果を示す。

SVG's user agent style sheet sets the 'overflow' property for 'pattern' elements to hidden, which causes a rectangular clipping path to be created at the bounds of the pattern tile. Unless the 'overflow' property is overridden, any graphics within the pattern which goes outside of the pattern rectangle will be clipped. Example pattern01 below shows the effect of clipping to the pattern tile.

'pattern' の内容は新しい座標系に相対的である。 viewBox 属性がある場合、新しい座標系は viewBox と preserveAspectRatio による標準の規則を用いて 'pattern' 要素の x, y, width, height, patternUnits 属性により定義される領域にはめ込まれる。 viewBox 属性が無い場合、新しい座標系はその原点を 'pattern' 要素の x,y 属性で確立される座標 (x,y) にとる。したがって、次の例：

The contents of the 'pattern' are relative to a new coordinate system. If there is a viewBox attribute, then the new coordinate system is fitted into the region defined by the x, y, width, height and patternUnits attributes on the 'pattern' element using the standard rules for viewBox and preserveAspectRatio. If there is no viewBox attribute, then the new coordinate system has its origin at (x,y), where x is established by the x attribute on the 'pattern' element, and y is established by the y attribute on the 'pattern' element. Thus, in the following example:

<pattern x="10" y="10" width="20" height="20">
   <rect x="5" y="5" width="10" height="10"/>
</pattern>

では、矩形はその左上がパターンタイルの原点から右へ５単位, 下へ５単位ずれたところに位置する。

the rectangle has its top/left located 5 units to the right and 5 units down from the origin of the pattern tile.

viewBox 属性により、 x, y, width, height, patternUnits 属性による新しいパターン座標系の上に適用される追加の変換がもたらされる。

The viewBox attribute introduces a supplemental transformation which is applied on top of any transformations necessary to create a new pattern coordinate system due to attributes x, y, width, height and patternUnits.

プロパティ は祖先から 'pattern' 要素に継承されるが、 'pattern' 要素を参照する要素からは継承されない。

Properties inherit into the 'pattern' element from its ancestors; properties do not inherit from the element referencing the 'pattern' element.

'pattern' 要素は決して直接描画されることはなく、 'fill' あるいは 'stroke' プロパティからの参照以外の使い方はない。 'display' プロパティは 'radialGradient' 要素に適用されない。すなわち、 'pattern' 要素は 'display' プロパティの値が none 以外であっても直接描画されることはなく、 'pattern' 要素あるいはその祖先において 'display' プロパティが none に設定されていても 'pattern' 要素を参照して利用することができる。

'pattern' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'pattern' element; thus, 'pattern' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'pattern' elements are available for referencing even when the 'display' property on the 'pattern' element or any of its ancestors is set to none.

'pattern' 要素の内容に付加された イベント属性 と イベントリスナ は処理されない。 'pattern' 要素においては描画に関する部分のみが処理される。

Event attributes and event listeners attached to the contents of a 'pattern' element are not processed; only the rendering aspects of 'pattern' elements are processed.

Example pattern01 にパターン・ペイントサーバへの参照を用いた矩形のフィルを示す。各三角形に対する青色のストロークにおいてその上端と左端部分が切り取られていることに注意。 これは SVG の ＵＡスタイルシート において 'pattern' 要素の 'overflow' プロパティが hidden に設定されていることにより、パターンタイルの境界でパターンが切り取られているからである。

Example pattern01 shows how to fill a rectangle by referencing a pattern paint server. Note how the blue stroke of each triangle has been clipped at the top and the left. This is due to SVG's user agent style sheet setting the 'overflow' property for 'pattern' elements to hidden, which causes the pattern to be clipped to the bounds of the pattern tile.

<?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">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="100" height="100"
             viewBox="0 0 10 10" >
      <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
    </pattern> 
  </defs>
    <!-- 描画領域の枠を青色にする -->
  <rect fill="none" stroke="blue" 
        x="1" y="1" width="798" height="398"/>
  <!-- 楕円の内部は三角形のパターン・ペイントサーバを用いて塗られ、
       外形線は黒色に塗られる-->
  <ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"  
           cx="400" cy="200" rx="350" ry="150" />
</svg>

Example pattern01

この例を SVG で見る（ SVG 対応ブラウザのみ）
 

13.6 DOM インターフェース

次に挙げるインターフェースが以下で定義される： SVGGradientElement, SVGLinearGradientElement, SVGRadialGradientElement, SVGStopElement, SVGPatternElement

インターフェース SVGGradientElement

SVGGradientElement インターフェースは SVGLinearGradientElement および SVGRadialGradientElement の基底インターフェースとなるものである。

IDL 定義

interface SVGGradientElement : 
                SVGElement,
                SVGURIReference,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGUnitTypes { 
  // Spread Method Types
  const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
  const unsigned short SVG_SPREADMETHOD_PAD     = 1;
  const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
  const unsigned short SVG_SPREADMETHOD_REPEAT  = 3;
  readonly attribute SVGAnimatedEnumeration   gradientUnits;
  readonly attribute SVGAnimatedTransformList gradientTransform;
  readonly attribute SVGAnimatedEnumeration   spreadMethod;
};

定義グループ Spread Method Types

定義されている定数

SVG_SPREADMETHOD_UNKNOWN		タイプが定義済みのものではないことを表す。新しい値にこのタイプを定めたり、既存の値をこのタイプに変更する試みは無効である。
SVG_SPREADMETHOD_PAD		値 pad に対応する。
SVG_SPREADMETHOD_REFLECT		値 reflect に対応する。
SVG_SPREADMETHOD_REPEAT		値 repeat に対応する。

属性

readonly SVGAnimatedEnumeration gradientUnits

与えられた要素の gradientUnits 属性に対応する。 SVGUnitTypes で定義されている定数のいずれか。

readonly SVGAnimatedTransformList gradientTransform

与えられた要素の gradientTransform 属性に対応する。

readonly SVGAnimatedEnumeration spreadMethod

与えられた要素の spreadMethod 属性に対応する。上の Spread Method Types で定義された定数のいずれか。

インターフェース SVGLinearGradientElement

SVGLinearGradientElement インターフェースは 'linearGradient' 要素に対応する。

IDL 定義

interface SVGLinearGradientElement : SVGGradientElement { 
  readonly attribute SVGAnimatedLength x1;
  readonly attribute SVGAnimatedLength y1;
  readonly attribute SVGAnimatedLength x2;
  readonly attribute SVGAnimatedLength y2;
};

属性

readonly SVGAnimatedLength x1

'linearGradient' 要素の x1 属性に対応する。

readonly SVGAnimatedLength y1

'linearGradient' 要素の y1 属性に対応する。

readonly SVGAnimatedLength x2

'linearGradient' 要素の x2 属性に対応する。

readonly SVGAnimatedLength y2

'linearGradient' 要素の y2 属性に対応する。

インターフェース SVGRadialGradientElement

SVGRadialGradientElement インターフェースは 'radialGradient' 要素に対応する。

IDL 定義

interface SVGRadialGradientElement : SVGGradientElement { 
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength r;
  readonly attribute SVGAnimatedLength fx;
  readonly attribute SVGAnimatedLength fy;
};

属性

readonly SVGAnimatedLength cx

'radialGradient' 要素の cx 属性に対応する。

readonly SVGAnimatedLength cy

'radialGradient' 要素の cy 属性に対応する。

readonly SVGAnimatedLength r

'radialGradient' 要素の r 属性に対応する。

readonly SVGAnimatedLength fx

'radialGradient' 要素の fx 属性に対応する。

readonly SVGAnimatedLength fy

'radialGradient' 要素の fy 属性に対応する。

インターフェース SVGStopElement

SVGStopElement インターフェースは 'stop' 要素に対応する。

IDL 定義

interface SVGStopElement : 
                SVGElement,
                SVGStylable { 
  readonly attribute SVGAnimatedNumber offset;
};

属性

readonly SVGAnimatedNumber offset

'stop' 要素の offset 属性に対応する。

インターフェース SVGPatternElement

SVGPatternElement インターフェースは 'pattern' 要素に対応する。

IDL 定義

interface SVGPatternElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGFitToViewBox,
                SVGUnitTypes { 
  readonly attribute SVGAnimatedEnumeration   patternUnits;
  readonly attribute SVGAnimatedEnumeration   patternContentUnits;
  readonly attribute SVGAnimatedTransformList patternTransform;
  readonly attribute SVGAnimatedLength        x;
  readonly attribute SVGAnimatedLength        y;
  readonly attribute SVGAnimatedLength        width;
  readonly attribute SVGAnimatedLength        height;
};

属性

readonly SVGAnimatedEnumeration patternUnits

'pattern' 要素の patternUnits 属性に対応する。 SVGUnitTypes で定義されている定数のいずれか。

readonly SVGAnimatedEnumeration patternContentUnits

'pattern' 要素の patternContentUnits 属性に対応する。 SVGUnitTypes で定義されている定数のいずれか。

readonly SVGAnimatedTransformList patternTransform

'pattern' 要素の patternTransform 属性に対応する。

readonly SVGAnimatedLength x

'pattern' 要素の x 属性に対応する。

readonly SVGAnimatedLength y

'pattern' 要素の y 属性に対応する。

readonly SVGAnimatedLength width

'pattern' 要素の width 属性に対応する。

readonly SVGAnimatedLength height

'pattern' 要素の height 属性に対応する。