SVGTransform: setSkewY() メソッド

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.

setSkewY()SVGTransform インターフェイスのメソッドで、変換の種類を SVG_TRANSFORM_SKEWX に設定し、引数の angle で Y 軸方向の歪めの量を定義します。

構文

js
setSkewY(angle)

引数

angle

浮動小数点値で、歪めの量を度単位で定義します。

返値

なし (undefined)。

例外

NoModificationAllowedError DOMException

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

SVG 要素を Y 軸に沿って歪める

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

// 30 度の Y 方向の歪めを適用
transform.setSkewX(30);

// 適用された座標変換の角度をログ出力
console.log(`歪め角度: ${transform.angle}`); // 出力: 30

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGTransform__setSkewY

ブラウザーの互換性

関連情報