SVGについて – テキストについて(5) – propansystem プロパンシステム

SVGについて – テキストについて(5)

テキストのx属性について試してみます。

前回のサンプルをもとに、x 属性の値を可変するサンプルを書きました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>

<style>
.params_box {
	padding-top: 30px;
}

.range {
	width: 300px;
}
</style>


</head>
<body>

<svg width="500" height="200" viewBox="0 0 500 200">

	<text
		id="test_text1"
		x="50"
		y="50"
		dx="0"
		dy="0"
		transform="rotate(0, 20,40)"
	>
	テキストのテスト
	</text>

</svg>


<div>
	<div class="params_box">
		<span class="param_title">パラメータ1</span>
		<div><input type="range" class="range" id="range1" value="0" max="400"></div>
		<span>x :</span>
		<span class="params" id="range1_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ2</span>
		<div><input type="range" class="range" id="range2" value="0" max="400"></div>
		<span>x :</span>
		<span class="params" id="range2_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ3</span>
		<div><input type="range" class="range" id="range3" value="0" max="400"></div>
		<span>x :</span>
		<span class="params" id="range3_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ4</span>
		<div><input type="range" class="range" id="range4" value="0" max="400"></div>
		<span>x :</span>
		<span class="params" id="range4_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ5</span>
		<div><input type="range" class="range" id="range5" value="0" max="400"></div>
		<span>x :</span>
		<span class="params" id="range5_value"></span>
	<div>

</div>


<script>

// スライダ range1 の要素を取得し、イベントを付与する
let range1_dom = document.getElementById('range1');
let range2_dom = document.getElementById('range2');
let range3_dom = document.getElementById('range3');
let range4_dom = document.getElementById('range4');
let range5_dom = document.getElementById('range5');

// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
range1_dom.addEventListener('input', change_range_slider);
range2_dom.addEventListener('input', change_range_slider);
range3_dom.addEventListener('input', change_range_slider);
range4_dom.addEventListener('input', change_range_slider);
range5_dom.addEventListener('input', change_range_slider);

// スライダーを動かし時の処理
function change_range_slider()
{
	console.log("range1_dom.value -> " + range1_dom.value);
	console.log("range2_dom.value -> " + range2_dom.value);
	console.log("range3_dom.value -> " + range3_dom.value);
	console.log("range4_dom.value -> " + range4_dom.value);
	console.log("range5_dom.value -> " + range5_dom.value);

	// パターン内のDOM情報を取得する
	let test_text1_dom = document.getElementById('test_text1');
	let test_text2_dom = document.getElementById('test_text2');
	let test_text3_dom = document.getElementById('test_text3');
	let test_text4_dom = document.getElementById('test_text4');
	let test_text5_dom = document.getElementById('test_text5');

	console.log("test_text1_dom -> " + test_text1_dom);
	console.log("test_text2_dom -> " + test_text2_dom);
	console.log("test_text3_dom -> " + test_text3_dom);
	console.log("test_text4_dom -> " + test_text4_dom);
	console.log("test_text5_dom -> " + test_text5_dom);

	// パラメータ1～パラメータ5まで値をリスト(配列)形式にして角度を決定する
	let param1_value = range1_dom.value;
	let param2_value = range2_dom.value;
	let param3_value = range3_dom.value;
	let param4_value = range4_dom.value;
	let param5_value = range5_dom.value;

	let set_param_value = param1_value + " "
	                    + param2_value + " "
	                    + param3_value + " "
	                    + param4_value + " "
	                    + param5_value;

	console.log("set_param_value -> " + set_param_value);

	// SVG要素の x属性 を変更する
	test_text1_dom.setAttribute('x', set_param_value);
	
	// 画面出力
	let range1_value_dom = document.getElementById('range1_value');
	let range2_value_dom = document.getElementById('range2_value');
	let range3_value_dom = document.getElementById('range3_value');
	let range4_value_dom = document.getElementById('range4_value');
	let range5_value_dom = document.getElementById('range5_value');

	range1_value_dom.innerHTML = range1_dom.value + '<br />';
	range2_value_dom.innerHTML = range2_dom.value + '<br />';
	range3_value_dom.innerHTML = range3_dom.value + '<br />';
	range4_value_dom.innerHTML = range4_dom.value + '<br />';
	range5_value_dom.innerHTML = range5_dom.value + '<br />';

}

</script>


</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスすると、「テキストのテスト」という文字列が表示されます。

スライダは全部で5つあり、それぞれのスライダを動かすと、文字列の1～4までは、
スライダの1から4までの値で、x軸の位置が変化し、5つ目のスライダは残り全ての文字列を1つの要素して
x軸方向に位置が変化します。

ここで注意が必要なことは

	test_text1_dom.setAttribute('x', set_param_value);

の箇所で、set_param_value の値をセットしていますが、
この変数の値は、空白で区切られたリスト形式の値をセットしています。

セットする項目は「x」で、1つの項目ですが、セットする値は、単一でも複数(リスト)の値でも動作します。

SVGについて – テキストについて(5)

コメントを残す