SVGTransform: setRotate() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

setRotate()SVGTransform インターフェイスのメソッドで、座標変換の種類を SVG_TRANSFORM_ROTATE に設定します。引数 angle は回転角度を定義し、引数 cxcy は回転のオプションの中心を定義します。

構文

js
setRotate(angle, cx, cy)

引数

angle

浮動小数点数で、回転角の角度を定義します。

cx 省略可

浮動小数点数で、回転の中心の X 座標を定義します。既定値は 0 です。

cy 省略可

浮動小数点数で、回転の中心の Y 座標を定義します。既定値は 0 です。

返値

なし (undefined)。

例外

NoModificationAllowedError DOMException

属性または SVGTransform オブジェクトが読み取り専用であった場合に発生します。

SVG 要素の回転

js
// SVG 要素を選択し、座標変換オブジェクトを作成
const svgElement = document.querySelector("svg");
const transform = svgElement.createSVGTransform();

// 45 度の回転を設定
transform.setRotate(45, 0, 0);

// 回転角を出力
console.log(`回転角: ${transform.angle}`); // 出力: 45

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGTransform__setRotate

ブラウザーの互換性

関連情報