W3cubDocs

/Web APIs

SVGTransform: setSkewX() method

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⁩.

The setSkewX() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_SKEWX, with parameter angle defining the amount of skew along the X-axis.

Syntax

setSkewX(angle)

Parameters

angle: A float defining the amount of skew in degrees.

Return value

None (undefined).

Exceptions

NoModificationAllowedError DOMException: Thrown if the attribute or the SVGTransform object is read-only.

Examples

Skewing an SVG Element Along the X-Axis

// Select an SVG element and create a transform object
const svgElement = document.querySelector("svg");
const transform = svgElement.createSVGTransform();

// Apply a skew of 30 degrees along the X-axis
transform.setSkewX(30);

// Log the applied transformation angle
console.log(`Skew Angle: ${transform.angle}`); // Output: 30

Specifications

Specification
Scalable Vector Graphics (SVG) 2> # __svg__SVGTransform__setSkewX>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`setSkewX`	1	12	1.5	≤12.1	4	18	4	≤12.1	3.2	1.0	4.4	3.2