座標変換 transform について – skewX skewY について

transform属性の skewX を試してみます。
以下のサンプルを用意しました。

<!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(150, 150)"
    />
</svg>

<div>
	<div class="params_box">
		<span>パラメータ1</span>
		<div><input type="range" class="range" id="range1" value="20" max="360"></div>
		<span>skewX : </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要素の skewX を変更する
	test_tran_dom1.setAttribute('transform', 'translate(150, 150), skewX(' + set_param_value + ')');
	
	// 画面出力
	let range1_value_dom = document.getElementById('range1_value');
	range1_value_dom.innerHTML = set_param_value;

}

</script>

</body>
</html>

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

画面にアクセスすると、これまでと同様のサンプルSVG画像が表示されます。

スライダーを操作すると、x軸方向に skewX の値が変化し、画像が動的に変わり、画像に対しての効果がわかります。

ちなみに skewX の値を指定している箇所で、下記のように

	// SVG要素の skewX を変更する
	test_tran_dom1.setAttribute('transform', 'translate(150, 150), skewX(' + set_param_value + ')');

同時に「translate(150, 150)」も設定していますが、これはスライダー変更時にSVG画像位置を固定して変化がわかりやすくする為に書いています。
実際の使用シーンでは、座標指定は画面の表示箇所の都合に合わせて指定するとよいと思います。

skewY について

さきほどのサンプルをもとに、transform属性の skewY を試してみます。
以下のサンプルを用意しました。

<!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(150, 150)"
    />
</svg>

<div>
	<div class="params_box">
		<span>パラメータ1</span>
		<div><input type="range" class="range" id="range1" value="20" max="360"></div>
		<span>skewY : </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要素の skewY を変更する
	test_tran_dom1.setAttribute('transform', 'translate(150, 150), skewY(' + set_param_value + ')');
	
	// 画面出力
	let range1_value_dom = document.getElementById('range1_value');
	range1_value_dom.innerHTML = set_param_value;

}

</script>

</body>
</html>

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

画面にアクセスすると、これまでと同様のサンプルSVG画像が表示されます。

スライダーを操作すると、y軸方向に skewY の値が変化し、画像への効果がわかります。

skewX skewY について

さらに、さきほどのサンプルをもとに、transform属性の skewX skewY の併用を試してみます。
以下のサンプルを用意しました。

<!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(150, 150)"
    />
</svg>

<div>
	<div class="params_box">
		<span>パラメータ1</span>
		<div><input type="range" class="range" id="range1" value="20" max="360"></div>
		<span>skewX : </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="360"></div>
		<span>skewY : </span>
		<span class="params" id="range2_value"></span>
	</div>

</div>

<script>
// スライダの要素を取得し、イベントを付与する
let range1_dom = document.getElementById('range1');
let range2_dom = document.getElementById('range2');

// 各スライダーごとのイベントに、共通の関数を割り当てて処理する
range1_dom.addEventListener('input', change_range_slider);
range2_dom.addEventListener('input', change_range_slider);

// スライダーを動かし時の処理
function change_range_slider()
{
	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);

	// SVG要素の skewX skewY を変更する
	test_tran_dom1.setAttribute('transform', 'translate(150, 150), skewX(' + range1_dom.value + '), skewY(' + range2_dom.value + ')');
	
	// 画面出力
	let range1_value_dom = document.getElementById('range1_value');
	let range2_value_dom = document.getElementById('range2_value');
	range1_value_dom.innerHTML = range1_dom.value;
	range2_value_dom.innerHTML = range2_dom.value;

}

</script>

</body>
</html>

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

画面にアクセスすると、これまでと同様のサンプルSVG画像が表示されます。

スライダーは2つあり、x方向とy方向の値を変更することができます。
それぞれのスライダーを操作すると、x軸方向に skewX、y軸方向に skewY、の値がそれぞれ変化し、画像への効果がわかります。

skewXを任意の値で変化させた後、skewYを任意の値で変化した場合、両方の効果がSVG画像に適用されることがわかります。

propansystem プロパンシステム

座標変換 transform について – skewX skewY について