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>
画面にアクセスすると、「テキストのテスト」という文字列が表示されます。
また、スライダを動かすと、0～400までの範囲で値が可変し、textLength属性の値を
動的に変更しています。
スライダを動かすとわかりますが、値が増えるほど、テキストの文字間隔が広がり、
値が減ると、文字間隔が狭くなることがわかります。