SVGについて – テキストについて(2)
テキストのtransform属性のrotateについて
SVGで出力したテキストのtransform属性について調べてみます。
MDNドキュメントを確認すると、「transform 属性は、要素とその要素の子に適用される変換定義のリストを定義します。」とあります。
ここでは、rotate の値を試してみます。
簡単なサンプルとして以下のコードを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
#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>
<span class="param_title">パラメータ</span>
<div class="params_box">
<div><input type="range" id="transform" value="0" max="360"></div>
<span>transform (rotate) :</span>
<span class="params" id="transform_value"></span>
</div>
</div>
<script>
// スライダtransformの要素を取得し、イベントを付与する
let transform_dom = document.getElementById('transform');
transform_dom.addEventListener('input', function(e) {
console.log("transform_dom.value -> " + transform_dom.value);
// パターン内のDOM情報を取得する
let test_text1_dom = document.getElementById('test_text1');
console.log("test_text1_dom -> " + test_text1_dom);
// SVG要素のtransform属性を変更する
test_text1_dom.setAttribute('transform', 'rotate(' + transform_dom.value + ')');
// 画面出力
let transform_value_dom = document.getElementById('transform_value');
transform_value_dom.innerHTML = transform_dom.value + '<br />';
});
</script>
</body>
</html>
画面にアクセスすると、「テキストのテスト」という文字列が表示されます。
さらに、画面上のスライダを移動すると、「id=”test_text1″」で定義したテキスト要素の
rotateが更新され、標示している文字列が回転します。
初期値は「0度」から始まり、最大値は「360度」になります。
viewboxのサイズの都合上、90度以上になると画面出力のエリア外になりますが、
360度に近づくにつれてまた画面上に出力されることがわかります。
テキストのrotate属性のについて
では次に、上記サンプルを少し変更し、
このサンプルを基に、text要素の各パラメータについて調べます。
SVGについて – テキストのrotate属性について
先程のサンプルのtransformをrotateに変更してみます。
これは前回投稿したサンプルと同じ結果になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
#transform {
width: 200px;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<text
id="test_text1"
x="20"
y="20"
dx="0"
dy="0"
>
テキストのテスト
</text>
</svg>
<div>
<span class="param_title">パラメータ</span>
<div class="params_box">
<div><input type="range" id="transform" value="0" max="360"></div>
<span>rotate :</span>
<span class="params" id="transform_value"></span>
</div>
</div>
<script>
// スライダtransformの要素を取得し、イベントを付与する
let transform_dom = document.getElementById('transform');
transform_dom.addEventListener('input', function(e) {
console.log("transform_dom.value -> " + transform_dom.value);
// パターン内のDOM情報を取得する
let test_text1_dom = document.getElementById('test_text1');
console.log("test_text1_dom -> " + test_text1_dom);
// SVG要素のrotateを変更する
test_text1_dom.setAttribute('rotate', transform_dom.value);
// 画面出力
let transform_value_dom = document.getElementById('transform_value');
transform_value_dom.innerHTML = transform_dom.value + '<br />';
});
</script>
</body>
</html>
画面にアクアスすると、テキスト文字列が標示されます。
スライダを変更すると、1文字づつ各文字が回転します。
先程のテスト1では、 transform の属性として rotate の値を変更しています。
この場合は、テキスト全体を回転する動きになり、
テスト2では、テキストのDOM要素に対して各文字ごとに rotate が反映されて回転することがわかります。