SVG文書内へのリンク

fragment identifierを利用することで、SVG文書の特定の部分を表示することを指定することができます。

表示する部分を指定することで、例えば、初期表示を変えることができます。

SVGのfragment identifierには、対象とする要素をIDによって指定する場合と、SVG view specification(SVGビュー仕様)の場合があります。

対象とする要素をIDによって指定する場合は、SVG文書のIRIに続けて"#"と対象のIDを記述します。

例えば、
sample.svg#elem00
のように書けば、sample.svg中のIDがelem00である要素の中心がビューポートの中心に一致するように表示されます。elem00が<rect xml:id="elem00" width="200" height="100"/>で記述される矩形の場合、矩形の中心((100,50)の位置)がビューポートの中心になります。回転角は保たれます。
指定された要素の領域がビューポートよりも大きかった場合は、svg要素のzoomAndPan属性によって拡大縮小が制限されていなければ、指定された要素の全体が表示されるように縮小されます。
指定された要素が存在しない場合は、fragment identifierが指定されなかった場合と同じように扱われます。

SVG view specificationの場合は、SVG文書のIRIに続けて"#"と"svgView("、")"に囲まれた変換のリストを記述します。

例えば、
sample.svg#svgView(transform(scale(2)))
のように書けば、sample.svgにtransform(scale(2))という変換を適用した領域が表示されます。すなわち、svg要素のviewBox属性等によって決まる初期表示から2倍に拡大した状態で表示されます。
fragment identifierには半角スペースを用いることはできないので、SVG view specification中の数値の間はカンマ(",")で区切ります。

fragment identifierが指定されない場合は、初期表示はSVG文書のsvg要素のviewBox属性等によって決まります。

例えば、
sample.svg
のように書けば、sample.svgのsvg要素のviewBox属性の値が"0 0 100 100"の場合、左上の頂点が(0,0)、幅100、高さ100の矩形領域が表示されます。

a

a要素は、リンクを示す際に使われます。

a要素によって、ハイパーリンクやウェブリンクとしても知られるリンクが指定された要素に関連付けられます。
SVG Tiny 1.2ではXLink仕様で定義される単純リンクをサポートします。単純リンクは、ローカルとリモートの2つのリソースの間のローカルからリモートへの一方向リンクです。
クリック等によりリンクが活性化されるとローカルからリモートへリンクがたどられます。
パラメータとして、リモートのリソース(リンク先)のIRI等を指定します。

リモートのリソースのIRIを指定する属性がxlink:hrefです。
リンクの種類を指定する属性がxlink:type、リモートのリソースのプロパティについて記述されたリソースのIRIを指定する属性がxlink:role、その内容を人間にわかりやすいように記述する属性がxlink:title、リモートのリソースのローカルのリソースに対する関係について記述されたリソースのIRIを指定する属性がxlink:arcroleです。
リモートのリソースを再生する対象を指定する属性がtargetです。

a要素の子孫の要素がローカルのリソースとなります。

例えば、
<a xlink:href="sample.svg">
<rect x="10" y="10" width="200" height="100"/>
</svg>
のように書けば、左上の頂点が(10,10)、幅200、高さ100の矩形がローカルのリソース、sample.svgがリモートのリソースになり、矩形をクリックすることで表示内容がsample.svgの内容に変わります。

xlink:href属性は指定されない場合は空の値("")として扱われます。空の値が指定された場合にはリンクはたどられません。
xlink:type属性の値は常に"simple"です。xlink:type属性を記述する必要はありません。
target属性は指定されない場合は"_self"として扱われます。すなわち、リンクをたどることでSVG文書の内容が表示されている領域がリンク先のコンテンツに置き換えられます。

ref()

ref()は、svg要素のビューボックスをビューポートにあてはめる変換と追加の移動を適用することを指定します。
transform属性の値になります。

refは、ref(svg, x, y)のようにパラメータとして最大3つの値を指定します。
svgは決められた値です。xがsvg要素の座標系でのx軸方向の移動量、yがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + xに、svg要素のビューボックスをビューポートにあてはめる変換を適用したもの
新しい座標系でのy = 元の座標系でのy + yに、svg要素のビューボックスをビューポートにあてはめる変換を適用したもの

新しい座標系は、ビューポートの座標系になります。すなわち、新しい座標系での(x,y)は表示領域内の位置を表します。

例えば、
<svg width="200" height="200" viewBox="0 0 100 100">
<g transform="ref(svg, 50, 50)">
</g>
</svg>
のように書けば、
ビューボックスは(0,0)を左上の頂点とする幅および高さが100の矩形領域、ビューポートは幅および高さが200の矩形領域であり、
ビューボックスをビューポートにあてはめる変換は2倍に拡大する変換となり、
新しい座標系でのx = 2 * (元の座標系でのx + 50)
新しい座標系でのy = 2 * (元の座標系でのy + 50)
のようになり、元の座標系での(0,0)は新しい座標系の(100,100)になります。

パラメータが1つしか指定されない場合は、xおよびyが指定されないものとして扱われます。

例えば、
<svg width="200" height="200" viewBox="0 0 100 100">
<g transform="ref(svg)">
</g>
</svg>
のように書けば、
新しい座標系でのx = 2 * 元の座標系でのx
新しい座標系でのy = 2 * 元の座標系でのy
のようになり、元の座標系での(50,50)は新しい座標系の(100,100)になります。

ref()は、移動、拡大/縮小、回転操作による位置の変化の影響を受けますが、図形が拡大/縮小、回転することはありません。
したがって、同じ大きさ、同じ向きで表示されつづけることになります。
パラメータが1つしか指定されない場合は、移動、拡大/縮小、回転操作の影響を受けません。
したがって、同じ位置に表示されつづけることになります。
(初期表示において3pxで表示された文字列は拡大しても3pxのままです。多分読めません。便利な変換だとは思いますが。)

変換の適用

transform属性による座標変換は、他の座標や長さに関する処理よりも前に適用されます。
したがって、他の座標や長さは新しい座標系での値に変換されて処理されます。

例えば、
<rect x="10" y="10" width="200" height="100" transform="scale(2)"/>
のように書けば、x属性、y属性、width属性、height属性(およびstroke-width等の記述されていないその他の属性)の値をtransform属性によって変換した後に矩形を描きます。
<g transform="scale(2)"/>
<rect x="10" y="10" width="200" height="100"/>
</g>
</g>
と同じにように、左上の頂点が(20,20)、幅400、高さ200の矩形が描かれます。

変換のリスト(2)

リスト内の変換は順に適用されます。

例えば、
<g transform="scale(2) translate(20,10)">
</g>
のように書けば、
<g transform="scale(2)">
<g transform="translate(20,10)">
</g>
</g>
と同じ変換を表します。
すなわち、x軸方向に20，y軸方向に10平行移動した後にx軸方向y軸方向ともに2倍に拡大されます。元の座標系での(0,0)は新しい座標系の(40,20)になります。

変換のリスト

変換のリストは、どのような変換を適用するのかを指定します。
transform属性の値になります。

変換のリストは、半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切られたいくつかの変換の組み合わせで表します。

変換には、
matrix(行列)、
translate(平行移動)、
scale(拡大縮小)、
rotate(回転)、
skewX(x軸の傾き)、
skewY(y軸の傾き)
があります。

matrixは、matrix(a b c d e f)のようにパラメータとして6つの値を指定します。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = a × 元の座標系でのx + c × 元の座標系でのy + e
新しい座標系でのy = b × 元の座標系でのx + d × 元の座標系でのy + f

例えば、
matrix(1,0,0,1,20,10)
のように書けば、
新しい座標系でのx = 1 × 元の座標系でのx + 20
新しい座標系でのy = 1 × 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。

translateは、translate(tx ty)のようにパラメータとして最大2つの値を指定します。
txがx軸方向の移動量、tyがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tx
新しい座標系でのy = 元の座標系でのy + ty

例えば、
translate(20,10)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 20
新しい座標系でのy = 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。

translate(tx, ty)はmatrix(1,0,0,1,tx,ty)と同じ変換を表します。

パラメータが1つしか指定されない場合は、tyが指定されないものとして扱われます。tyは指定されない場合は0として扱われます。
したがって、y軸方向の移動量が0の場合は省略できますが、y軸方向の移動量が0の場合は"0"と記述する必要があります。

scaleは、scale(sx sy)のようにパラメータとして最大2つの値を指定します。
sxがx軸方向の拡大率、syがy軸方向の拡大率になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = sx × 元の座標系でのx
新しい座標系でのy = sy × 元の座標系でのy

例えば、
scale(2,1)
のように書けば、
新しい座標系でのx = 2 × 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。

scale(sx, sy)はmatrix(sx,0,0,sy,0,0)と同じ変換を表します。

パラメータが1つしか指定されない場合は、syが指定されないものとして扱われます。syは指定されない場合はsxと同じ値が指定されたものとして扱われます。
すなわち、y軸方向の拡大率と、y軸方向の拡大率は等しいものとして扱われます。

rotateは、rotate(a cx cy)のようにパラメータとして最大3つの値を指定します。
aが回転角度、cxが回転中心のx座標、cyが回転中心のy座標になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy + (-cx × cos(a) + cy × sin(a) + cx)
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy + (-cx × sin(a) - cy × cos(a) + cy)

例えば、
rotate(90, 10, 10)
のように書けば、
新しい座標系でのx = -1 × 元の座標系でのy + 10 × 1 + 10
新しい座標系でのy = 1 × 元の座標系でのx - 10 × 1 + 10
のようになり、元の座標系での(20,20)は新しい座標系の(0,20)になります。

回転中心が(0,0)の場合は、元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy

rotate(a cx cy)はmatrix(cos(a),sin(a),-sin(a),cos(a),-cx×cos(a)+cy×sin(a)+cx,-cx×sin(a)-cy×cos(a)+cy)と同じ変換を表します。

aの単位は度です。
パラメータが1つしか指定されない場合は、回転中心が指定されないものとして扱われます。回転中心は指定されない場合は回転中心は(0,0)として扱われます。

skewXは、skewX(a)のようにパラメータとして1つの値を指定します。
aがx軸の傾き角度になります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tan(a) × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy

例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 1 × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。

skewX(a)はmatrix(1,0,tan(a),1,0,0)と同じ変換を表します。

aの単位は度です。

skewYは、skewY(a)のようにパラメータとして1つの値を指定します。
aがy軸の傾き角度になります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = tan(a) × 元の座標系でのx + 元の座標系でのy

例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのx + 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(10,20)になります。

skewX(a)はmatrix(1,tan(a),0,1,0,0)と同じ変換を表します。

aの単位は度です。

transform

transform属性は、図形を変形して描く際に使われます。

transform属性によって、図形に適用される座標系の変換が指定されます。

transform属性の値は、変換のリスト、制限を与える変換(ref())、もしくは"none"です。

例えば、
<g transform="matrix(1,0,0,1,20,10)">
<rect width="200" height="100"/>
</g>
のように書けば、g要素およびその子要素にmatrix(1,0,0,1,20,10)で表される変換が適用されることを表します。
結果として左上の左上の頂点が(20,10)、幅200、高さ100の矩形が描かれます。

全ての値が0の行列(matrix(0,0,0,0,0,0))が指定された場合は、その図形(および子要素)は描かれません。
正しくない値が指定された場合は、単位行列が適用されます。
transofrom属性がない場合は"none"として扱われます。"none"が指定された場合は、単位行列が適用されます。

preserveAspectRatio

preserveAspectRatio属性は、ビューポートの領域にビューボックスの領域をどのようにあてはめるかを指定する際に使われます。

preserveAspectRatio属性によって、新しいビューポートを確立する要素の確立したビューポートにビューボックスの領域をあてはめる際に縦横比を保つか保たないかが指定されます。

preserveAspectRatio属性の値は、ビューポートの領域へのビューボックスの領域のあてはめ方です。

"defer"、配置方法、"meet"の3つの値を記述します。defer"と"meet"は必要がなければ省略できます。

配置方法は、ビューポートとビューボックスで縦横比が異なる場合の配置方法を示します。
値は、"none"、"xMinYMin"、"xMidYMin"、"xMaxYMin"、"xMinYMid"、"xMidYMid"、"xMaxYMid"、"xMinYMax"、"xMidYMax"、"xMidYMax"です。
"none"の場合は、縦横比を保ちません。ビューポートの領域いっぱいにビューボックスの領域をあてはめます。
縦横比を保つ場合は、"none"以外の値になります。
xMinは、ビューボックスの最も小さなx座標をビューポートの最も小さなx座標にそろえることを示します。
xMidは、ビューボックスの中央のx座標をビューポートの中央のx座標にそろえることを示します。
xMaxは、ビューボックスの最も大きなx座標をビューポートの最も大きなx座標にそろえることを示します。
YMinは、ビューボックスの最も小さなy座標をビューポートの最も小さなy座標にそろえることを示します。
YMidは、ビューボックスの中央のy座標をビューポートの中央のy座標にそろえることを示します。
YMaxは、ビューボックスの最も大きなy座標をビューポートの最も大きなy座標にそろえることを示します。
"meet"は、縦横比を保ち、ビューボックスの領域全体がビューポートの領域に収まるように、できるだけ拡大することを示します。ビューポートとビューボックスで縦横比が異なる場合は、ビューポートの領域の一部は何も描かれないことになります。

例えば、
<svg width="240" height="320" viewBox="0 0 80 160" preserveAspectRatio="none"/>
のように書けば、幅240、高さ320の矩形領域がビューポートとなり、(0,0)(80,0)(80,160)(0,160)で囲まれるビューボックスの領域が縦3倍横2倍に拡大され、あてはめられます。また、
<svg width="240" height="320" viewBox="0 0 80 160" preserveAspectRatio="xMidYMid meet"/>
のように書けば、ビューボックスの領域が縦横それぞれ2倍に拡大され、x座標y座標とも中央をそろえてあてはめられます。結果として、左右に空白の領域ができることになります。

値の先頭に"defer"と加えた場合は、参照される側のpreserveAspectRatio属性を利用することを示します。animation要素のpreserveAspectRatio属性において有効です。(仕様では、imageおよびvideo要素のpreserveAspectRatio属性においても有効となっていますが、SVG Tiny 1.2でSVG文書を参照するのはanimation要素だけのような・・・)

例えば、
<animation xlink:href="sample.svg" preserveAspectRatio="deferxMidYMid meet" width="100" height="100"/>
のように書けば、sample.svgのルートのsvg要素のpreserveAspectRatio属性の値が利用されます。sample.svgのルートのsvg要素にpreserveAspectRatio属性がない場合は、animation要素のpreserveAspectRatio属性の値から"defer"を除いた"xMidYmid meet"が適用されます。

preserveAspectRatio属性がない場合は"xMidYMid meet"として扱われます。
preserveAspectRatio属性の付いた要素のviewBox属性によってあるいは暗黙のうちにビューボックスが指定されない場合は、無視されます。

animation

animation要素は、他のSVG文書の内容を描く際に使われます。

animation要素によって、他のSVG文書の内容が参照され指定された矩形領域に描かれます。
パラメータとして、参照するSVG文書のIRIと参照したSVG文書の内容を描く矩形の左上の頂点(x軸y軸ともに値の小さくなる頂点)と幅、高さ等を指定します。

参照するSVG文書のIRIを指定する属性がxlink:hrefです。
参照したSVG文書の内容を描く矩形の左上の頂点のx座標を指定する属性がx、y座標を指定する属性がy、幅を指定する属性がwidth、高さを指定する属性がheightです。
ビューボックスとビューポートとの関係を指定する属性がpreserveAspectRatioです。

例えば、
<animation xlink:href="sample.svg" x="10" y="10" width="100" height="100"/>
のように書けば、sample.svgの内容が左上の頂点が(10,10)、幅100、高さ100の矩形の領域に描かれます。
animation要素は新しいビューポートを確立します。ビューポートはanimation要素のx、y、width、height属性によって決定されます。参照されるSVG文書のルートのsvg要素のx、y、width、height属性は利用されません。
preserveAspectRatio、viewport-fillおよびviewport-fill-opacity属性についても、animation要素の属性が利用されます。
ビューポートの領域に、参照されるSVG文書のルートのsvg要素のviewBox属性によって指定されるビューボックスの領域をあてはめます。

x属性およびy属性は指定されない場合は0として扱われます。すなわち、参照するSVG文書の内容を描く矩形の左上の頂点のx座標(あるいはy座標)が0ということです。
width属性およびheight属性は必ず指定する必要があります。どちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
xlink:href属性は指定されない場合は空の値("")として扱われます。空の値が指定された場合には何も描画されません。xlink:href属性の値が何らかの理由で変更された場合は参照されるSVG文書のタイムラインは0に戻ります。

animation要素は、use要素のように文書の一部を参照するのではなく、全体を参照します。
表示領域外のSVG文書をあらかじめ読み込んでおくのか、あるいは必要になってから読み込むのかは定められていません。あらかじめ読み込むめの手がかりを与えたい場合にはprefetch要素を利用します。

opacity

opacityプロパティは、オブジェクトおよびグループの不透明度を指定する際に使われます。

opacityプロパティによって、オブジェクトおよびグループの不透明度が指定されます。
SVG Tiny 1.2ではimage要素の不透明度のみを指定することができます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、opacityプロパティの値を指定する場合はopacity属性を利用します。

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

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

例えば、
opacity="1"
のように書けば、opacity属性の付いたimage要素によって描かれる画像がもともと透過色で描かれていない限り、背景は全く透過しません。

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

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