SVG javascriptスクリプト

JavaScriptを使用して、SVGスクリプトを記述できます。スクリプトを記述することで、SVG要素を変更し、アニメーションを設定したり、形状上のマウスイベントをリスニングすることができます。SVGがHTMLページに埋め込まれた場合、JavaScriptを使用してSVG要素を使用できます。

SVGスクリプトをJavaScriptで書くことができます。スクリプトを書くことで、SVG要素を変更したり、アニメーションを設定したり、形状上のマウスイベントをリスンすることができます。

SVGがHTMLページに埋め込まれた場合、JavaScriptを使用してSVG要素を使用することができます。JavaScriptのコードは同じです。

この記事では、JavaScriptを使用してSVG要素を処理する例を示しましたが、JavaScript自体については説明しておりません。この記事の例を理解するには、JavaScriptに関する基本的な知識が必要です。

SVGスクリプトの例

これはボタンをクリックするとSVG矩形の寸法を変更するシンプルなSVGスクリプトの例です。

<svg　width="500"　height="100">
　　　　<rect　id="rect1"　x="10" y="10" width="50" height="80"
　　　　　　　　　　style="stroke:#000000;　fill:none;"/>
</svg>
<input　id="button1"　type="button"　value="Change　Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function　changeDimensions()　{
　　　　　　　　document.getElementById("rect1).setAttribute("width",　"10);
　　　　}
</script>

ボタンをクリックして何が起こるかを試してみてください。

IDを通じてSVG要素の参照を取得

document.getElementById()関数を使用してSVG形状の参照を取得できます。以下はその例です：

var svgElement = document.getElementById("rect1");

この例では、IDがrect1のSVG要素の参照(IDはSVG要素のid属性で指定されています)。

属性値を変更

SVG要素の参照を取得したら、setAttribute()関数を使用して属性を変更できます。以下はその例です：

var svgElement = document.getElementById("rect1);svgElement.setAttribute("width",　"10);

この例では、選択されたSVG要素のwidth属性を設定しています。setAttribute()関数を使用して、style属性を含む他の属性を設定することもできます。

getAttribute()　関数を使用して属性の値を取得することもできます。以下はその例です：

var svgElement = document.getElementById("rect1);var　width　=　svgElement.getAttribute("width");

CSS属性を変更

SVG要素のstyle属性を参照して指定されたCSS属性を使用することで、SVG要素のCSS属性を変更できます。以下はstroke CSS属性を設定する例です：

var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";

他のCSS属性もこのように設定できます。名前をsvgElement.style.の次の行に置き、値を設定するだけで良いです。

style属性を使用してCSS属性の値を読み取ることもできます。以下はその例です：

var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;

この例では、stroke CSS属性の値を読み取ります。

名前にハイフンを含むCSS属性名（例えばstroke-width）は['']構造を使用して参照する必要があります。これは、ハイフンを含む属性名がJavaScriptでは無効であるためです。したがって、以下のように書くことはできません

element.style.stroke-width

逆に、以下のように書かなくてはなりません

element.style['stroke-width']

また、名前にハイフンがあることでCSS属性を参照することもできます。

イベントリスナー

SVGにイベントリスナーを追加することもできます。HTML要素と同様に操作を行います。以下はonmouseoverおよびonmouseoutイベントリスナーを追加する例です：

<svg　width="500"　height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;"　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] =　5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] =　1;"　　　　
/>　　　　
</svg>

この例では、マウスが矩形に乗ったときに線の色と線の太さを変更し、マウスが矩形から離れたときに線の色と線の太さをリセットします。以下の例を試してみてください。マウスを形状に移動して、再び移動させ、イベントリスナーの効果を確認してください。

addEventListener()関数を使用してSVG要素にイベントリスナーを追加することもできます。以下はその例です：

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("イベントが発生しました!");
}

この例では、MouseOverイベントにMouseOverイベントリスナー関数を追加しています。これは、ユーザーがSVG要素にマウスを乗せると、イベントリスナー関数が呼び出されることを意味します。

アニメーションSVG形状

SVG形状にアニメーション効果を追加するには、JavaScript関数を繰り返し呼び出す必要があります。この関数は形状の位置やサイズを変更するために使用されます。関数が繰り返し呼び出され、非常に短い間隔で行われると、形状の位置やサイズも非常に短い間隔で更新され、これにより形状がアニメーションのように見えます。

これはSVGスクリプトアニメーションの例です。以下にそのコードが表示されています。アニメーションのSVG画像の下の二つのボタンをクリックしてアニメーションを開始および停止してください。

これが上記のアニメーションを作成するために必要なコードです：

<svg　width="500"　height="100">
　　　　<circle　id="circle1"　cx="20"　cy="20"　r="10"
　　　　　　　　　　　　style="stroke:　none;　fill:　#ff0000;"/>
</svg>
<script>
　　　　var　timerFunction　=　null;
　　　　function　startAnimation()　{
　　　　　　　　if(timerFunction　==　null)　{
　　　　　　　　　　　　timerFunction　=　setInterval(animate,　20);
　　　　　　　　}
　　　　}
　　　　function　stopAnimation()　{
　　　　　　　　if(timerFunction　!=　null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction　=　null;
　　　　　　　　}
　　　　}
　　　　function　animate()　{
　　　　　　　　var　circle　=　document.getElementById("circle1");
　　　　　　　　var　x　=　circle.getAttribute("cx");
　　　　　　　　var　newX　=　2　+　parseInt(x);
　　　　　　　　if(newX　>　500)　{
　　　　　　　　　　　　newX　=　20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx",　newX);
　　　　}
</script>
<br/>
<input type="button" value="アニメーションを開始" onclick="startAnimation();">
<input type="button" value="アニメーションを停止" onclick="stopAnimation();">

これらのHTMLボタンにはonclickリスナーが追加されています。これらのリスナーはstartAnimation()とstopAnimation()関数を呼び出し、アニメーションの開始と停止を行います。アニメーションは、タイマーを設定して開始され、タイマーは20ミリ秒でAnimate()関数を呼び出します。このタイマー機能を再びクリアすると、アニメーションを停止できます。

アニメーションはanimate()関数の内部で実行されます。まず、document.getElementById()関数を使用してSVG画像内の<circle>要素への参照を取得します。次に、円のcx属性を読み取り、数値に変換します。次に、2cx値に加えます。新しいx値がcx値を超える場合、500にすると、それをリセットします。20。最後に、新しいx値を<circle>要素のcx属性に戻します。円は新しいx位置に移動します。