| 目次 |
|---|
|
・図形を操作する ・<svg>要素を回転する ・<svg>要素を移動する ・<svg>要素を伸縮する ・<svg>要素を傾斜する ・同じ図形を利用する ・リンクを張る |
<svg>要素を回転/移動/伸縮させるなどの操作が可能です。
その対象は、各図形単位で行えます。
Javascriptなどと組み合わせると、アニメーションも可能です。
基本的に、図形の回転/移動/伸縮には、transform属性を用います。
また、<g>要素を使うことで複数の図形をまとめて一つの図形として扱うことができます。
リスト1. 複数図形をまとめて
<!-- クリッピングパスを定義 --> <clipPath id="clip01"> <rect x="110" y="20" width="200" height="100" /> </clipPath> <!-- 図形をまとめてクリッピング --> <g id="fig01" stroke="red" style="clip-path:url(#clip01)"> <rect x="50" y="50" width="100" height="100" fill="blue" /> <circle cx="150" cy="150" r="60" fill="green" /> </g>
コーディング例
上記の例では、四角形と円がまとめてクリッピングされていることに注目してください。
transform属性内でrotateメソッドを使って、各図形要素を回転します。
回転の中心は、各図形要素の原点となります。
回転方向は、時計回りです。
角は絶対角となります。
リスト2. 回転する
<!-- まとめて45度回転 --> <g transform="rotate(10)" > <line x1="0" y1="0" x2="300" y2="0" stroke="red" /> <text x="20" y="0" font-size="20"> 45度回転で描画 </text> </g>
コーディング例
上記の例では、<g>要素で直線とテキストがまとめられています。
直線とテキストは、左上の原点から定義しています。
<g>要素でまとめて、45度回転します。
transform属性内でtranslateメソッドを使って、各図形要素を移動します。
移動は、各図形要素の原点が移動します。
移動座標は絶対座標となります。
リスト3. 移動する
<!-- 移動前 --> <g> <line x1="0" y1="25" x2="300" y2="25" stroke="red" /> <text x="0" y="25" font-size="20"> 移動前 </text> </g> <!-- 移動後 --> <g transform="translate(150,100)" > <line x1="0" y1="25" x2="300" y2="25" stroke="blue" /> <text x="0" y="25" font-size="20"> 移動後(0,0 → 150,100) </text> </g>
コーディング例
上記の例では、<g>要素で直線とテキストがまとめられています。
直線とテキストは、左上の原点から定義しています。
<g>要素でまとめて、座標を移動します。
transform属性内でscaleメソッドを使って、各図形要素を伸縮します。
伸縮は、各図形要素の原点を中心に伸縮します。
伸縮は絶対倍率となります。
リスト4. 伸縮する
<!-- 伸縮前 --> <g> <line x1="0" y1="25" x2="300" y2="25" stroke="red" /> <text x="0" y="25" font-size="20"> 伸縮前 </text> </g> <!-- 伸縮後 --> <g transform="translate(150,100)"> <g transform="scale(0.5,2)"> <line x1="0" y1="25" x2="300" y2="25" stroke="blue" /> <text x="0" y="25" font-size="20"> 伸縮後(幅 0.5倍、高さ 2倍) </text> </g> </g>
コーディング例
上記の例では、<g>要素で直線とテキストがまとめられています。
直線とテキストは、左上の原点から定義しています。
<g>要素でまとめて、伸縮を行い、その後 移動しています。
transform属性内でskewメソッドを使って、各図形要素を傾斜します。
傾斜は、各図形要素の原点を中心に傾斜します。
傾斜は絶対倍率となります。
リスト5. 傾斜する
<!-- X方向傾斜 --> <g transform="skewX(45)" > <rect x="0" y="0" width="150" height="20" stroke="red" fill="none" /> <text x="0" y="20"> X方向傾斜(45度) </text> </g> <!-- Y方向傾斜 --> <g transform="skewY(45)" > <rect x="0" y="0" width="150" height="20" stroke="blue" fill="none" /> <text x="0" y="20"> Y方向傾斜(45度) </text> </g>
コーディング例
上記の例では、<g>要素で直線とテキストがまとめられています。
直線とテキストは、左上の原点から定義しています。
<g>要素でまとめて、伸縮を行い、その後 移動しています。
<svg>要素では、図形を定義してそれを利用して描画することができます。
定義出来る図形は、単純なものから、複雑なものまで定義することができます。
<defs>要素は、定義域を示すものです。
<defs>要素の図形は表示されません。
<use&>要素を使って、定義された図形を利用します。
呼び出し方は、<image&>要素ににています。
<use&>要素のidを使って、再利用することも可能です。
リスト6. 図形を定義する
<defs> <!-- 参照元となる図形 --> <g id="src01" fill="none"> <rect x="0" y="0" width="50" height="50" stroke="red" /> <circle cx="50" cy="50" r="40" stroke="blue" /> </g> </defs> <!-- そのまま 配置 --> <use x="20" y="10" xlink:href="#src01" /> <!-- 回転を加える → "src02"として再定義 --> <use x="150" y="0" xlink:href="#src01" transform="rotate(30)" id="src02" /> <!-- "src02"を再利用 --> <use x="200" y="0" xlink:href="#src02" />
コーディング例
<svg>要素では、図形にリンクを張ることができます。
リスト7. リンクを張る
<a xlink:href="#list1" filter="url(#MyFilter)" title="図形を操作する">
<ellipse cx="80" cy="20" rx="50" ry="10" stroke="blue" fill="blue"/>
<text x="80" y="25" text-anchor="middle" fill="yellow">list1</text>
</a>
<a xlink:href="#list2" filter="url(#MyFilter)" transform="translate(0,50)" title="<svg>要素を回転する">
<ellipse cx="80" cy="20" rx="50" ry="10" stroke="green" fill="green"/>
<text x="80" y="25" text-anchor="middle" fill="yellow">list2</text>
</a>
<a xlink:href="" filter="url(#MyFilter)" transform="translate(0,50)" onclick="alert('クリック');return false;">
<ellipse cx="80" cy="20" rx="50" ry="10" stroke="red" fill="red"/>
<text x="80" y="25" text-anchor="middle" fill="yellow">alert</text>
</a>
コーディング例
上記の例では、楕円とテキストがボタンの役割をします。
上二つは、同じページ内のアンカーにジャンプします。
「alert」はJavascriptを実行します。
<svg>要素では、図形をスクリプトで動かすことができます。
リスト8. スクリプトを実行する
<svg id="svg0707" width="500" height="200" style="background:white;">
<text id="txt01" x="50" y="50" font-size="32" filter="url(#MyFilter)" fill="black">
現在
<tspan id="year01" x="50" dy="40">0000</tspan>年
<tspan id="month01">00</tspan>月
<tspan id="day01">00</tspan>日
(<tspan id="week01"> </tspan>)
<tspan id="hour01" x="50" dy="40">00</tspan>時
<tspan id="minute01">00</tspan>分
<tspan id="second01">00</tspan>秒
</text>
</svg>
<script>
// タイマーをセット
myTimer();
// タイマー内容を定義
function myTimer(){
var now = new Date();
var txt = document.getElementById('txt01');
// 年表示
var y = document.getElementById('year01');
dy = now.getFullYear();
y.firstChild.nodeValue = dy;
// 月表示
var m = document.getElementById('month01');
dm = now.getMonth() + 1;
if( dm == 1 ){
m.setAttribute("fill","red");
}
else
{
m.setAttribute("fill","black");
}
m.firstChild.nodeValue = dm;
// 日表示
var d = document.getElementById('day01');
dd = now.getDate();
if( dd == 1 ){
m.setAttribute("fill","red");
}
else
{
m.setAttribute("fill","black");
}
d.firstChild.nodeValue = dd;
// 曜日表示
var w = document.getElementById('week01');
wt = ['日','月','火','水','木','金','土'];
dw = now.getDay();
if( dw == 0 ){
w.setAttribute("fill","red");
}
else
if( dw == 7 ){
w.setAttribute("fill","blue");
}
else
{
w.setAttribute("fill","black");
}
w.firstChild.nodeValue = wt[dw];
// 時表示
var h = document.getElementById('hour01');
dh = now.getHours();
if( dh == 1 ){
h.setAttribute("fill","red");
}
else
{
h.setAttribute("fill","black");
}
h.firstChild.nodeValue = dh;
// 分表示
var n = document.getElementById('minute01');
dn = now.getMinutes();
if( dn == 0 ){
n.setAttribute("fill","red");
}
else
{
n.setAttribute("fill","black");
}
n.firstChild.nodeValue = dn;
// 秒表示
var s = document.getElementById('second01');
ds = now.getSeconds();
if( ds == 0 ){
s.setAttribute("fill","red");
}
else
{
s.setAttribute("fill","black");
}
s.firstChild.nodeValue = ds;
// 1秒後を定義
setTimeout("myTimer()", 1000);
}
</script>
コーディング例