座標変換 transform について – rotate について
transform属性の rotate を試してみます。
以下のサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.params_box {
padding-bottom: 20px;
}
.range {
width: 400px;
}
</style>
</head>
<body>
<svg width="400" height="400" viewBox="0 0 400 400">
<path
id = "test_tran_dom1"
d = "M 20 20 A 20 20 0 0 1 100 100"
stroke = "#4f4f4f"
stroke-width = "1"
fill = "#cccccc"
transform = "translate(10, 10)"
/>
</svg>
<div>
<div class="params_box">
<span>パラメータ1</span>
<div><input type="range" class="range" id="range1" value="20" max="300"></div>
<span>rotate :</span>
<span class="params" id="range1_value"></span>
</div>
</div>
<script>
// スライダの要素を取得し、イベントを付与する
let range1_dom = document.getElementById('range1');
// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
range1_dom.addEventListener('input', change_range_slider);
// スライダーを動かし時の処理
function change_range_slider()
{
console.log("range1_dom.value -> " + range1_dom.value);
// DOMを取得する
let test_tran_dom1 = document.getElementById('test_tran_dom1');
console.log("test_tran_dom1 -> " + test_tran_dom1);
// パラメータの値をリスト(配列)形式にして値を決定する
let param1_value = range1_dom.value;
let set_param_value = param1_value;
console.log("set_param_value -> " + set_param_value);
// SVG要素の x属性 を変更する
test_tran_dom1.setAttribute('transform', 'rotate(' + set_param_value + ')');
// 画面出力
let range1_value_dom = document.getElementById('range1_value');
range1_value_dom.innerHTML = range1_dom.value;
}
</script>
</body>
</html>
画面にアクセスすると、1つのDOMが出力されます。
パラメータを操作することで、svg画像に指定した rotate の値の変化を見ることができます。
また、このサンプルのrotateは引数が1つだけです。
rotateの引数が1つだけの場合は、SVG画像を描画している要素の「x軸：0 y軸:0」を起点として画像を回転します。
rotate の引数について
rotateの引数を調整することで、回転する起点を変えることができます。
具体的には
rotate(角度, [x方向の起点, y方向の起点])
という形で、引数を割り当てることができます。
例えば
rotate(45, 50, 100)
と指定した場合は、SVG画像を45度回転し、そのSVG画像をx:50、y:100の座標を軸に回転します。
以下、簡単なサンプルを書きました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.params_box {
padding-bottom: 20px;
}
.range {
width: 400px;
}
</style>
</head>
<body>
<svg width="400" height="400" viewBox="0 0 400 400">
<path
id = "test_tran_dom1"
x = "20"
y = "20"
d = "M 20 20 A 20 20 0 0 1 100 100"
stroke = "#4f4f4f"
stroke-width = "1"
fill = "#cccccc"
transform = "translate(10, 10)"
/>
</svg>
<div>
<div class="params_box">
<span>パラメータ0</span>
<div><input type="range" class="range" id="range0" value="20" max="360"></div>
<span>回転方向 :</span>
<span class="params" id="range0_value"></span>
</div>
<div class="params_box">
<span>パラメータ1</span>
<div><input type="range" class="range" id="range1" value="20" max="300"></div>
<span>x軸方向 :</span>
<span class="params" id="range1_value"></span>
</div>
<div class="params_box">
<span>パラメータ2</span>
<div><input type="range" class="range" id="range2" value="20" max="300"></div>
<span>y軸方向 :</span>
<span class="params" id="range2_value"></span>
</div>
</div>
<script>
// スライダの要素を取得し、イベントを付与する
let range0_dom = document.getElementById('range0');
let range1_dom = document.getElementById('range1');
let range2_dom = document.getElementById('range2');
// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
range0_dom.addEventListener('input', change_range_slider);
range1_dom.addEventListener('input', change_range_slider);
range2_dom.addEventListener('input', change_range_slider);
// スライダーを動かし時の処理
function change_range_slider()
{
console.log("range0_dom.value -> " + range0_dom.value);
console.log("range1_dom.value -> " + range1_dom.value);
console.log("range2_dom.value -> " + range2_dom.value);
// DOMを取得する
let test_tran_dom1 = document.getElementById('test_tran_dom1');
console.log("test_tran_dom1 -> " + test_tran_dom1);
// パラメータの値をリスト(配列)形式にして値を決定する
let param0_value = range0_dom.value;
let param1_value = range1_dom.value;
let param2_value = range2_dom.value;
let set_param_value = param0_value + ","
+ param1_value + ","
+ param2_value;
console.log("set_param_value -> " + set_param_value);
// SVG要素の x属性 を変更する
test_tran_dom1.setAttribute('transform', 'rotate(' + set_param_value + ')');
// 画面出力
let range0_value_dom = document.getElementById('range0_value');
let range1_value_dom = document.getElementById('range1_value');
let range2_value_dom = document.getElementById('range2_value');
range0_value_dom.innerHTML = range0_dom.value;
range1_value_dom.innerHTML = range1_dom.value;
range2_value_dom.innerHTML = range2_dom.value;
}
</script>
</body>
</html>
画面にアクセスすると、SVG画像と、パラメータが3つ表示されます。
パラメータ0は回転角度、パラメータ1はx座標、パラメータ2はy座標、をそれぞれ変更できます。
例えば、パラメータ1を40、パラメータ2を60にして、パラメータ0の回転角度を変更すると、
rotateは下記のようにセットされ、SVG画像は、x:40 y:60の座標を起点として回転するようになります。
rotate(任意の角度, 40, 60)
パラメータ0～2 をそれぞれ変更すると、引数がどのように影響するか把握しやすくなります。