text

text要素は、文字列を描く際に使われます。

text要素によって、text要素内の文字列に対応したグリフが1本のまっすぐな線にそって描かれます。
途中で改行は行われません。
パラメータとして、文字列の位置と回転角を指定します。
文字列は、方向やフォント等の指定にしたがって描かれます。

文字列の位置のx座標を指定する属性がx、y座標を指定する属性がyです。
回転角を指定する属性がrotateです。

例えば、
<text x="100" y="100">テキスト</text>
のように書けば、(100,100)に"テ"に対応したグリフが描かれます。"キ"以降は、直前のグリフの位置にadvance値を加えた位置に描かれます。
指定した座標がグリフに対してどの位置になるかは、フォント等によります。横書き(左から右)の日本語の場合は、通常左下になります。

x属性、y属性の値がカンマ(",")あるいは、半角スペースで区切られた複数の数字の場合は、順に1文字目のx座標(y座標)、2文字目のx座標(y座標)・・・となります。

例えば、
<text x="100,120" y="100,110">テキスト</text>
のように書けば、(100,100)に"テ"に対応したグリフが、(120,110)に"キ"に対応したグリフが描かれます。"ス"以降は、直前のグリフの位置にadvance値を加えた位置に描かれます。

rotate属性の値は、カンマ(",")あるいは、半角スペースで区切られた複数の数字で、順に1文字目の回転角、2文字目の回転角・・・となります。

例えば、
<text x="100" y="100" rotate="10,20">テキスト</text>
のように書けば、"テ"に対応したグリフは10度、"キ"、"ス"および"ト"に対応したグリフは20度回転して描かれます。位置には影響を与えません。

x属性およびy属性は指定されない場合は0として扱われます。すなわち、文字列の位置のx座標(あるいはy座標)が0ということです。
rotate属性で指定された値の数が文字の数よりも少ない場合は、多い分の文字についてはrotate属性で指定された最後の値が適用されます。rotate属性で指定された値の数が文字の数よりも多い場合は、多い分の回転角の値については無視されます。複数の文字が1つのグリフに割り当てられる場合には、最初の文字に対応する回転角が適用され2文字目以降に対応する回転角の値は無視されます。

vector-effect

vector-effectプロパティは、輪郭線の幅が変わらないことを指定する際に使われます。

vector-effectプロパティによって、描かれる図形の輪郭線の幅が拡大/縮小によって変わらないことが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、vector-effectプロパティの値を指定する場合はvector-effect属性を利用します。

vector-effect属性の値は"non-scaling-stroke"、"none"、もしくは"inherit"です。
"non-scaling-stroke"の場合は、輪郭線の描かれる領域を"host coordinate space"(SVG 1.2では常に"screen coordinate space"と一致します)上で求めます。輪郭線の幅はtransform属性や拡大/縮小操作の影響を受けなくなります。
"none"の場合は、デフォルトの描画が適用されます。輪郭線の幅はtransform属性や拡大/縮小操作によって変化します。

例えば、
<path d="M10,10L100,100" stroke="#000000" fill="none" stroke-width="2" vector-effect="non-scaling-stroke"/>
のように書けば、描かれる図形の輪郭線は拡大/縮小操作によらず常に2ピクセル分の幅になります。

vector-effect属性がない場合は"none"として扱われます。

fill-rule

fill-ruleプロパティは、図形の内部領域を指定する際に使われます。

fill-ruleプロパティによって、描かれる図形の内部領域が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、fill-ruleプロパティの値を指定する場合はfill-rule属性を利用します。

fill-rule属性の値は"nonzero"、"evenodd"、もしくは"inherit"です。
内側か外側かを判定したい点から無限遠まで(と書いてありますが、SVG文書の図形が存在していない領域なら問題ないかと)直線を引き、その直線と図形の輪郭線が交わる箇所を調べます。
"nonzero"の場合は、図形の輪郭線が左から右に交わっていたら+1、右から左に交わっていたら-1とし、全ての交わった箇所について足し合わせます。結果が0でなければその点は図形の内部と、0であれば図形の外部と判定します。交わった向きによるので、図形がどのような順で描画されたのかに影響されます。
"evenodd"の場合は、交わった回数が奇数なら図形の内側、偶数なら図形の外側と判定します。右から左に交わるか左から右に交わるかは関係ありません。

例えば、
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="nonzero">
のように書けば、(100,100)は図形の内部になります。
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="evenodd">
のように書けば、(100,100)は図形の外部になります。

fill-rule属性がない場合は"nonzero"として扱われます。

fill-rule属性は任意の図形要素の属性となりますが、rect、circleおよびellipse要素ではどちらの値をとっても同じように描画されます。

stroke-miterlimit

stroke-miterlimitプロパティは、輪郭線の接続部の形が"miter"となる限界を指定する際に使われます。

stroke-miterlimitプロパティによって、どのくらい角が伸びたら接続部を"miter"ではなく"bevel"にするかが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-miterlimitプロパティの値を指定する場合はstroke-miterlimit属性を利用します。

stroke-miterlinit属性の値はmiter長(miterによる接続において、輪郭線の内側の交点と外側を伸ばしてできた交点の間の長さ)の線幅に対する比率、もしくは"inherit"です。

例えば、
stroke-linejoin="miter" stroke-miterlimit="2"
のように書けば、stroke-miterlimit属性の付いた要素によって描かれる図形の輪郭線の接続部は、miter長の線幅に対する比率が2を超えたら"bevel"になります。

miter長(miterLength)、線幅(stroke-width)と接続される輪郭線のなす角度(theta)の関係は次の式のようになります。
miterLength / stroke-width = 1 / sin(theta / 2)
stroke-miterlimit = miterLength / stroke-width
なので、
stroke-miterlimit = 1 / sin(theta / 2)
となり、接続される輪郭線のなす角度によって"miter"で描画するのか"bevel"で描画するのかが決まります。

例えば、
stroke-linejoin="miter" stroke-miterlimit="4"
のように書けば、
4 = 1 / sin(theta / 2)
より、thetaが約29度よりも小さいときに"miter"ではなく"bevel"で描画されます。

stroke-miterlimit属性の値が1より小さな値が指定された場合は、stroke-miterlimit属性が指定されなかったものとして扱われます。

stroke-miterlimit属性がない場合は4として扱われます。すなわち、miter長の線幅に対する比率が4を超えたら"bevel"になります。

stroke-linejoin

stroke-linejoinプロパティは、輪郭線の接続部の形を指定する際に使われます。

stroke-linejoinプロパティによって、矩形や折れ線等の図形の輪郭線の接続部の形が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-linejoinプロパティの値を指定する場合はstroke-linejoin属性を利用します。

stroke-linejoin属性の値は"miter"、"round"、"bevel"、もしくは"inherit"です。
"miter"の場合は、接続する2つの輪郭線の外側(交わっていない側)を交わるまで伸ばし内側を輪郭線の色で塗りつぶします。輪郭線の接続部はとがった形になります。
"round"の場合は、接続点の座標を中心として線の太さを直径とする円の内側を輪郭線の色で塗りつぶします。輪郭線の接続部は丸くなります。
"bevel"の場合は、接続する2つの輪郭線の外側(交わっていない側)の端同士をまっすぐな線で結び内側を輪郭線の色で塗りつぶします。

例えば、
stroke-width="4" stroke-linejoin="round"
のように書けば、stroke-linejoin属性の付いた要素によって描かれる図形の輪郭線の接続部は半径2の半円の形になります。

stroke-linejoin属性がない場合は"miter"として扱われます。

輪郭線の接続部は、rect、polyline、polygonおよびpath要素によって描かれる図形に存在します。

stroke-linecap

stroke-linecapプロパティは、輪郭線の端の形を指定する際に使われます。

stroke-linecapプロパティによって、描かれる図形の輪郭線の端の形が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-linecapプロパティの値を指定する場合はstroke-linecap属性を利用します。

stroke-linecap属性の値は"butt"、"round"、"square"、もしくは"inherit"です。
"butt"の場合は、端点の座標を通る輪郭線と直角に交わる直線になります。輪郭線の端は輪郭線と直角になります。
"round"の場合は、端点の座標を中心として線の太さを直径とする円の内側を輪郭線の色で塗りつぶします。輪郭線の端は丸くなります。
"square"の場合は、端点の座標を中心として線の太さを一辺の長さとする矩形の内側を輪郭線の色で塗りつぶします。矩形の1組の辺は輪郭線の端に平行、もう1組の辺は垂直になります。輪郭線は見ためには線幅の分だけ長くなります。

例えば、
stroke-width="4" stroke-linecap="round"
のように書けば、stroke-linecap属性の付いた要素によって描かれる図形の輪郭線の端は半径2の半円の形になります。

stroke-linecap属性がない場合は"butt"として扱われます。すなわち、端は輪郭線と直角になります。

stroke-dashoffset

stroke-dashoffsetプロパティは、輪郭線を破線を途中から利用して描く際に使われます。

stroke-dashoffsetプロパティによって、描かれる図形の輪郭線の描き始めに対応する破線の位置が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-dashoffsetプロパティの値を指定する場合はstroke-dashoffset属性を利用します。

stroke-dashoffset属性の値は破線中の位置を示す長さ、もしくは"inherit"です。
破線中の位置を示す長さの分だけ破線が進んだ位置から描画が始まります。

例えば、
stroke-dasharray="5,3" stroke-dashoffset="3"
のように書けば、破線の形は長さ2の線と長さ3の間隔の後に長さ5の線と長さ3の間隔の繰り返す形になります。

stroke-dashoffset属性がない場合は"0"として扱われます。すなわち、破線の先頭から描かれます。

stroke-dasharray

stroke-dasharrayプロパティは、図形の輪郭線を破線で描く際に使われます。

stroke-dasharrayプロパティによって、描かれる図形の輪郭線を描く破線の形(線の長さと線と線の間隔)が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-dasharrayプロパティの値を指定する場合はstroke-dasharray属性を利用します。

stroke-dasharray属性の値は"none"、破線の形を表す値のリスト、もしくは"inherit"です。
破線の形を表す値のリストは、それぞれの値の間をカンマ(",")で区切ります。
値は先頭から2つずつ線の長さと線と線の間隔の長さのペアとして扱います。

例えば、
stroke-dasharray="5,3"
のように書けば、破線の形は長さ5の線と長さ3の間隔の繰り返しになります。

リストの値の数が奇数であった場合には、同じリストがもう1つ後ろにつながっているものとして扱います。

例えば、
stroke-dasharray="5,3,2"
のように書けば、
stroke-dasharray="5,3,2,5,3,2"
と同じように、長さ5の線、長さ3の間隔、長さ2の線、長さ5の間隔、長さ3の線、長さ2の間隔の繰り返しになります。

破線の形を表すリストに負の値が指定された場合は、stroke-dasharray属性が指定されなかったものとして扱われます。
また、リストの値の合計が0になる場合は"none"として扱われます。

stroke-dasharray属性がない場合は"none"として扱われます。"none"が指定された場合は、その図形の輪郭線は実線で描かれます。

破線を構成するそれぞれの線の端点は、stroke-linecapプロパティの値にしたがった形になります。
長さが0の場合も端点の処理が行われるため、stroke-linecapプロパティの値にしたがった形になります。

Simple alpha compositing

図形が描画されると、描画された領域は図形要素により指定された色とキャンバスの色(既に描かれている図形によって着色された色)とを混ぜた色になります。

図形要素の色とキャンバスの色を混ぜた色は以下の式で求められます。

Er, Eg, Eb - 図形要素の色(順に赤、緑、青の値)
Ea - 図形の要素の不透明度
Cr, Cg, Cb - キャンバスの色(順に赤、緑、青の値)
Ca - キャンバスの不透明度
Cr', Cg', Cb' - 図形要素の色とキャンバスの色を混ぜた色(順に赤、緑、青の値)
Ca' - 図形要素の色とキャンバスの色を混ぜた不透明度

Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

例えば、
rgb(100,100,100)、不透明度1で着色されている領域に、
<rect width="10" height="10" fill="#0f0000" fill-opacity="0.5"/>
で表される矩形が描かれた場合、矩形の領域の色は、
Er = 127
Eg = 0
Eb = 0
Ea = 0.5
Cr = 100
Cg = 100
Cb = 100
Ca = 1

Ca' = 1 - (1 - 0.5) * (1 - 1) = 1
Cr' = (1 - 0.5) * 100 + 127 = 177
Cg' = (1 - 0.5) * 100 + 0 = 50
Cb' = (1 - 0.5) * 100 + 0 = 50
のように求められ、rgb(177,50,50)、不透明度1となります。

stroke-opacity

stroke-opacityプロパティは、図形の輪郭線の不透明度を指定する際に使われます。

stroke-opacityプロパティによって、描かれる図形の輪郭線の色の不透明度が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、stroke-opacityプロパティの値を指定する場合はstroke-opacity属性を利用します。

stroke-opacity属性の値は不透明度を表す値、もしくは"inherit"です。

不透明度を表す値は、0.0(完全に透過)から1.0(全く透過しない)までの値になります。

例えば、
stroke-opacity="1"
のように書けば、stroke-opacity属性の付いた要素によって描かれる図形の輪郭線はstroke属性によって指定された色で描かれ、背景は全く透過しません。

0.0から1.0の範囲に収まらない値が指定された場合は、0.0(0.0よりも小さな場合)あるいは1.0(1.0よりも大きな場合)として扱われます。

stroke-opacity属性がない場合は"1"として扱われます。すなわち、全く透過しません。