SVG+JavaScriptでベクタ画像表示
2022-08-21 10:56:22
ソースコード
https://codesandbox.io/s/tiger-d1dftr
アプリケーションの説明
虎画像が描画される。ラジオボタンとスライダーを操作することで虎画像が拡大縮小する。
ソースコードの説明
SVGの <path> 要素を多数使うことで虎画像を描画している。
スライダー（ <input type="range"> ）のイベントハンドラ内で、SVGの <g> 要素を取得し、CSS3の transform で拡大縮小の値を指定している。
（SVGの拡大縮小を変更するより簡単そうだったため）
function onSliderChange(e) {
var value = e.target.value;
var f = document.getElementById("sd").checked;
var scale = f ? 1 - value / 100 : 1 + value / 10;
var g = document.getElementById("tigerScale");
g.style.transform = `scale(${scale})`;
}