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

javascript
Posted

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

テキストのtransform属性のrotateについて

前回のサンプルの rotate の値は、単一の値を指定して、各文字列の角度を指定しました。

今回は、指定する角度を配列形式のリストで指定してみます。

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

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

#transform {
	width: 200px;
}
</style>


</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 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" id="transform1" value="0" max="360"></div>
		<span>transform (rotate) :</span>
		<span class="params" id="transform1_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ2</span>
		<div><input type="range" id="transform2" value="0" max="360"></div>
		<span>transform (rotate) :</span>
		<span class="params" id="transform2_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ3</span>
		<div><input type="range" id="transform3" value="0" max="360"></div>
		<span>transform (rotate) :</span>
		<span class="params" id="transform3_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ4</span>
		<div><input type="range" id="transform4" value="0" max="360"></div>
		<span>transform (rotate) :</span>
		<span class="params" id="transform4_value"></span>
	</div>

	<div class="params_box">
		<span class="param_title">パラメータ5</span>
		<div><input type="range" id="transform5" value="0" max="360"></div>
		<span>transform (rotate) :</span>
		<span class="params" id="transform5_value"></span>
	</div>

</div>


<script>

// スライダtransform1の要素を取得し、イベントを付与する
let transform1_dom = document.getElementById('transform1');
transform1_dom.addEventListener('input', function(e) {

	console.log("transform1_dom.value -> " + transform1_dom.value);
	console.log("transform2_dom.value -> " + transform2_dom.value);
	console.log("transform3_dom.value -> " + transform3_dom.value);
	console.log("transform4_dom.value -> " + transform4_dom.value);
	console.log("transform5_dom.value -> " + transform5_dom.value);

	// パターン内のDOM情報を取得する
	let test_text1_dom = document.getElementById('test_text1');
	console.log("test_text1_dom -> " + test_text1_dom);

	// パラメータ1～パラメータ5まで値をリスト(配列)形式にして角度を決定する
	let rotate_value = transform1_dom.value
	                 + ',' + transform2_dom.value
	                 + ',' + transform3_dom.value
	                 + ',' + transform4_dom.value
	                 + ',' + transform5_dom.value;

	// SVG要素のtransform1属性を変更する
	test_text1_dom.setAttribute('rotate', rotate_value);
	
	// 画面出力
	let transform1_value_dom = document.getElementById('transform1_value');
	transform1_value_dom.innerHTML = transform1_dom.value + '<br />';

});

// スライダtransform2の要素を取得し、イベントを付与する
let transform2_dom = document.getElementById('transform2');
transform2_dom.addEventListener('input', function(e) {

	console.log("transform1_dom.value -> " + transform1_dom.value);
	console.log("transform2_dom.value -> " + transform2_dom.value);
	console.log("transform3_dom.value -> " + transform3_dom.value);
	console.log("transform4_dom.value -> " + transform4_dom.value);
	console.log("transform5_dom.value -> " + transform5_dom.value);

	// パターン内のDOM情報を取得する
	let test_text1_dom = document.getElementById('test_text1');
	console.log("test_text1_dom -> " + test_text1_dom);

	// パラメータ1～パラメータ5まで値をリスト(配列)形式にして角度を決定する
	let rotate_value = transform1_dom.value
	                 + ',' + transform2_dom.value
	                 + ',' + transform3_dom.value
	                 + ',' + transform4_dom.value
	                 + ',' + transform5_dom.value;

	// SVG要素のtransform2属性を変更する
	test_text1_dom.setAttribute('rotate', rotate_value);
	
	// 画面出力
	let transform2_value_dom = document.getElementById('transform2_value');
	transform2_value_dom.innerHTML = transform2_dom.value + '<br />';

});

// スライダtransform3の要素を取得し、イベントを付与する
let transform3_dom = document.getElementById('transform3');
transform3_dom.addEventListener('input', function(e) {

	console.log("transform1_dom.value -> " + transform1_dom.value);
	console.log("transform2_dom.value -> " + transform2_dom.value);
	console.log("transform3_dom.value -> " + transform3_dom.value);
	console.log("transform4_dom.value -> " + transform4_dom.value);
	console.log("transform5_dom.value -> " + transform5_dom.value);

	// パターン内のDOM情報を取得する
	let test_text1_dom = document.getElementById('test_text1');
	console.log("test_text1_dom -> " + test_text1_dom);

	// パラメータ1～パラメータ5まで値をリスト(配列)形式にして角度を決定する
	let rotate_value = transform1_dom.value
	                 + ',' + transform2_dom.value
	                 + ',' + transform3_dom.value
	                 + ',' + transform4_dom.value
	                 + ',' + transform5_dom.value;

	// SVG要素のtransform3属性を変更する
	test_text1_dom.setAttribute('rotate', rotate_value);
	
	// 画面出力
	let transform3_value_dom = document.getElementById('transform3_value');
	transform3_value_dom.innerHTML = transform3_dom.value + '<br />';

});

// スライダtransform4の要素を取得し、イベントを付与する
let transform4_dom = document.getElementById('transform4');
transform4_dom.addEventListener('input', function(e) {

	console.log("transform1_dom.value -> " + transform1_dom.value);
	console.log("transform2_dom.value -> " + transform2_dom.value);
	console.log("transform3_dom.value -> " + transform3_dom.value);
	console.log("transform4_dom.value -> " + transform4_dom.value);
	console.log("transform5_dom.value -> " + transform5_dom.value);

	// パターン内のDOM情報を取得する
	let test_text1_dom = document.getElementById('test_text1');
	console.log("test_text1_dom -> " + test_text1_dom);

	// パラメータ1～パラメータ5まで値をリスト(配列)形式にして角度を決定する
	let rotate_value = transform1_dom.value
	                 + ',' + transform2_dom.value
	                 + ',' + transform3_dom.value
	                 + ',' + transform4_dom.value
	                 + ',' + transform5_dom.value;

	// SVG要素のtransform4属性を変更する
	test_text1_dom.setAttribute('rotate', rotate_value);
	
	// 画面出力
	let transform4_value_dom = document.getElementById('transform4_value');
	transform4_value_dom.innerHTML = transform4_dom.value + '<br />';

});

// スライダtransform5の要素を取得し、イベントを付与する
let transform5_dom = document.getElementById('transform5');
transform5_dom.addEventListener('input', function(e) {

	console.log("transform1_dom.value -> " + transform1_dom.value);
	console.log("transform2_dom.value -> " + transform2_dom.value);
	console.log("transform3_dom.value -> " + transform3_dom.value);
	console.log("transform4_dom.value -> " + transform4_dom.value);
	console.log("transform5_dom.value -> " + transform5_dom.value);

	// パターン内のDOM情報を取得する
	let test_text1_dom = document.getElementById('test_text1');
	console.log("test_text1_dom -> " + test_text1_dom);

	// パラメータ1～パラメータ5まで値をリスト(配列)形式にして角度を決定する
	let rotate_value = transform1_dom.value
	                 + ',' + transform2_dom.value
	                 + ',' + transform3_dom.value
	                 + ',' + transform4_dom.value
	                 + ',' + transform5_dom.value;

	// SVG要素のtransform5属性を変更する
	test_text1_dom.setAttribute('rotate', rotate_value);
	
	// 画面出力
	let transform5_value_dom = document.getElementById('transform5_value');
	transform5_value_dom.innerHTML = transform5_dom.value + '<br />';

});

</script>


</body>
</html>

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

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

スライダーは1から5まであり、1、2、3、4までのスライダを動かすと、それぞれ
1文字目、2文字目、3文字目、4文字目までの各文字が角度指定されて回転します。

ただ、スライダの5番目だけは挙動が異なり、5文字目以降の「のテスト」全体に効果がかかります。

このことから、setAttributeのrotateの指定は、上記の仕様で動作することがわかります。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です