座標系の変換

第 2 章形状 22

2.4 座標系の変換

xmlns="http://www.w3.org/2000/svg">

<line x1="50" y1="5" x2="50" y2="65" stroke-width="0.2"

stroke="red"/>

<text x="50" y="20" text-anchor="start">start</text>

<text x="50" y="40" text-anchor="middle">middle</text>

</g>

</svg>

2.3.6 パスに沿ったテキスト

text要素の子供として、textPathという要素型の要素を書くことによって、テキストをパスに沿って配置するということができます。

テキストをパスに沿って配置したいときは、まず、そのためのパスをpath要素を使って作ります。そのとき、path要素の空要素タグの中に、

id=" 名前 "

という属性指定を書くことによって、そのpath要素に名前を付けておきます。

そして、textPath要素の開始タグの中に、

xlink:href="# 名前 "

という属性指定で、path要素の名前をxlink:href属性に設定すると、それによって指定されたパスに沿ってテキストが配置されます。

パスに沿ったテキストを描画するだけで、パス自体を描画する必要はない、という場合は、

<defs>

</defs>

というように、defsという要素の子供としてpath要素を書きます。このように、defs要素は、

要素に名前を付けたいけれども、その要素の作用は抑制したい、というときに使います。

SVG文書の例 textpath.svg

<?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">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

</defs>

Yoda: Do or do not. There is no try.

</textPath>

</text>

</svg>

2.4 座標系の変換

2.4.1 座標系の変換の基礎

SVGで形状を描画するときに使う座標系というのは、ひとつのSVG文書の中ではひとつだけしか使えないというわけではなくて、必要に応じて変更を加えることができるようになっています。そのような変更のことを、座標系の「変換」(transformation)と呼びます。

座標系の変換には、移動(translation)、拡大(scaling)、回転(rotation)、剪断（せんだん） (skew-ing)などがあります。

座標系を変換したいときは、形状を描画する要素が持っているtransformという属性に対して、どのような変換をしたいのかということを記述した属性値を設定します。たとえば、rect

32 第2章形状要素を作る空要素タグの中にtransformの属性指定を書けば、その長方形は、transform属性に設定された記述によって変換された座標系を使って描画されることになります。

transform属性の属性指定を書くことが可能な要素は、形状を描画する要素だけではなくて、

g要素やuse要素でも可能です。

2.4.2 座標系の移動

座標系の移動というのは、指定された距離だけ原点の位置を移動させるということです。

座標系を移動させたいときは、

translate( tx , ty )

という形の記述を、属性値としてtransform属性に設定します。そうすると、x軸方向にtx、y 軸方向にtyだけ原点を移動させた座標系が設定されます。たとえば、

transform="translate(40, 20)"

という属性指定は、座標系の原点を、x軸方向に40、y軸方向に20だけ移動させるという意味になります。

SVG文書の例 transla.svg

<?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">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</symbol>

<use xlink:href="#cross" transform="translate(20, 30)"

stroke="navy"/>

<text x="24" y="28" fill="limegreen">original</text>

<text x="44" y="58" fill="navy">translate(20, 30)</text>

</g>

</svg>

2.4.3 座標系の拡大

座標系の拡大というのは、指定された拡大率で距離の単位を伸縮させるということです。

座標系を拡大したいときは、transform属性に設定する属性値として、

scale( sx , sy )

という形のものを書きます。そうすると、距離の単位をx軸方向にsx倍、y軸方向にsy倍だけ拡大した座標系が設定されます。たとえば、

transform="scale(1.4, 0.8)"

という属性指定は、座標系の距離の単位を、x軸方向に1.4倍、y軸方向に0.8倍だけ拡大するという意味になります。

y軸方向の拡大率を省略して、

scale( sx )

と書くと、y軸方向の拡大率はx軸方向と同じだと解釈されます。

SVG文書の例 scale.svg

<?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">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

2.4. 座標系の変換 33

</symbol>

<use xlink:href="#cross" transform="scale(3, 0.3)"

stroke="navy"/>

<text x="24" y="58" fill="limegreen">original</text>

<text x="60" y="24" fill="navy">scale(3, 0.3)</text>

</g>

</svg>

2.4.4 座標系の回転

座標系の回転というのは、指定された点を中心にして、指定された角度だけ座標軸を回転させるということです。

座標系を回転させたいときは、transform属性に設定する属性値として、

rotate( θ , cx , cy )

という形のものを書きます。そうすると、(cx, cy)という点を中心として、時計回りにθ度だけ回転させた座標系が設定されます。たとえば、

transform="rotate(60, 40, 30)"

という属性指定は、(40,30)という点を中心として、時計回りに60度だけ座標系を回転させるという意味になります。

回転の角度をマイナスにすると、座標系は、時計回りではなく反時計回りで回転することになります。

SVG文書の例 rotate.svg

<?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">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</symbol>

<use xlink:href="#cross" transform="rotate(60, 40, 30)"

stroke="navy"/>

<text x="50" y="38" fill="limegreen">original</text>

<text x="46" y="53" fill="navy">rotate(60, 40, 30)</text>

</g>

</svg>

2.4.5 座標系の剪断

座標系の剪断というのは、指定された軸に沿って、指定された角度だけ座標系を傾けるということです。

x軸に沿って座標系を剪断したいときは、transform属性に設定する属性値として、

skewX( θ )

という形のものを書きます。そうすると、x軸に沿ってθ度だけ剪断した座標系、つまり、y軸をθ度だけ傾けた座標系が設定されます。たとえば、

skewX(30)

という属性指定は、x軸に沿って座標系を30度だけ剪断するという意味になります。同じように、

34 第2章形状 skewY( θ )

という形のものを書くことによって、y軸に沿ってθ度だけ剪断した座標系、つまり、x軸をθ 度だけ傾けた座標系を設定することができます。

SVG文書の例 skew.svg

<?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">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</symbol>

<use xlink:href="#cross" transform="skewX(60)"

stroke="navy"/>

<use xlink:href="#cross" transform="skewY(50)"

stroke="crimson"/>

<text x="24" y="28" fill="limegreen">original</text>

<text x="55" y="15" fill="navy">skewX(60)</text>

<text x="33" y="58" fill="crimson">skewY(50)</text>

</g>

</svg>

2.4.6 変換の順序

transform属性には、単独の変換の記述だけではなくて、いくつかの変換の記述をホワイトス

ペースで区切って並べたものを設定することも可能です。1個のtransform属性に複数の変換の記述が設定されている場合、それぞれの記述は、入れ子になった複数の要素のtransform属性に設定されたものだとみなされます。たとえば、

</g>

という記述があらわしている変換は、

</g>

という記述があらわしている変換と同じものになります。

ですから、1個のtransform属性に設定されている複数の変換の記述は、右から左へ向かって順番に実行されると考えることができます。

SVG文書の例 order.svg

<?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">

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</symbol>

<use xlink:href="#cross" stroke="navy"

transform="scale(3, 1) rotate(40, 20, 20)"/>

<use xlink:href="#cross" stroke="crimson"

transform="rotate(40, 20, 20) scale(3, 1)"/>

<text x="14" y="36" fill="limegreen">original</text>

ドキュメント内 SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen (ページ 31-35)

第 2 章 形状 22

2.4 座標系の変換

2.4 座標系の変換

第 2 章形状 22