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

javascript

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

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

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

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

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

.transform {
	width: 400px;
}
</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="transform" id="transform1" value="0" max="400"></div>
		<span>textLength :</span>
		<span class="params" id="transform1_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);

	// パターン内の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;

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

});

</script>


</body>
</html>

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

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

また、スライダを動かすと、0~400までの範囲で値が可変し、textLength属性の値を
動的に変更しています。

スライダを動かすとわかりますが、値が増えるほど、テキストの文字間隔が広がり、
値が減ると、文字間隔が狭くなることがわかります。

コメントを残す

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