Movatterモバイル変換

[0]ホーム
URL:

  1. Web
  2. SVG
  3. Reference
  4. Attributes
  5. transform

transform

Baseline Widely available

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

Thetransform attribute defines a list of transform definitions that are applied to an element and the element's children.

Note:As a presentation attribute,transform also has a CSS property counterpart:transform. When both are specified, the CSS property takes priority. Note that there are some differences in syntax between the CSS property and the attribute!

Elements

In SVG 2, you can use thetransform attribute on any element, including the<svg> root.Note that usingtransform on the<svg> root is a newer feature, and you should checkbrowser compatibility for support.Usingtransform on the<svg> root is convenient for applying transforms to an entire SVG image without the need for extra wrapper elements or CSS workarounds.

In SVG 1.1, only these 16 elements were allowed to have atransform applied:<a>,<circle>,<clipPath>,<defs>,<ellipse>,<foreignObject>,<g>,<image>,<line>,<path>,<polygon>,<polyline>,<rect>,<switch>,<text>, and<use>.

Also, as a legacy from SVG 1.1,<linearGradient> and<radialGradient> support thegradientTransform attribute, and<pattern> supports thepatternTransform attribute, both of which behave exactly like thetransform attribute.

Value

Value<transform-list>
Default valuenone
AnimatableYes

Examples

Apply a transform to a single SVG element

In this example, we apply atransform to a single<g> element inside an SVG document:

html,body,svg {  height: 100%;}
html
<svg  viewBox="-40 0 150 100"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <g    fill="grey"    transform="rotate(-10 50 100)               translate(-36 45.5)               skewX(40)               scale(1 0.5)">    <path           d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />  </g>  <use href="#heart" fill="none" stroke="red" /></svg>

Apply a transform to an entire SVG document

In this example, we apply atransform to the<svg> root element, meaning that the transform is applied to the entire SVG document:

html
<svg  viewBox="-40 0 150 100"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  transform="rotate(-10 50 100)               translate(-36 15.5)               skewX(40)               scale(1 0.5)">  <g fill="grey">    <path           d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />  </g>  <use href="#heart" fill="none" stroke="red" /></svg>

Transform functions

The following transform functions can be used by thetransform attribute<transform-list>.

Warning:As per the spec, you should be able to also use CSStransform functions. However, the compatibility isn't guaranteed.

Matrix

Thematrix(<a> <b> <c> <d> <e> <f>) transform function specifies a transformation in the form of a transformation matrix of six values.matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix:

(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}

Which maps coordinates from a previous coordinate system into a new coordinate system by the following matrix equalities:

(xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

Example

html,body,svg {  height: 100%;}
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">  <rect x="10" y="10" width="30" height="20" fill="green" />  <!--  In the following example we are applying the matrix:  [a c e]    [3 -1 30]  [b d f] => [1  3 40]  [0 0 1]    [0  0  1]  which transform the rectangle as such:  top left corner: oldX=10 oldY=10  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80  top right corner: oldX=40 oldY=10  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110  bottom left corner: oldX=10 oldY=30  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140  bottom right corner: oldX=40 oldY=30  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170  -->  <rect    x="10"    y="10"    width="30"    height="20"    fill="red"    transform="matrix(3 1 -1 3 30 40)" /></svg>

Translate

Thetranslate(<x> [<y>]) transform function moves the object byx andy. Ify is not provided, it is assumed to be0.

In other words:

xNew = xOld + <x>yNew = yOld + <y>

Example

html,body,svg {  height: 100%;}
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <!-- No translation -->  <rect x="5" y="5" width="40" height="40" fill="green" />  <!-- Horizontal translation -->  <rect    x="5"    y="5"    width="40"    height="40"    fill="blue"    transform="translate(50)" />  <!-- Vertical translation -->  <rect    x="5"    y="5"    width="40"    height="40"    fill="red"    transform="translate(0 50)" />  <!-- Both horizontal and vertical translation -->  <rect    x="5"    y="5"    width="40"    height="40"    fill="yellow"    transform="translate(50 50)" /></svg>

Scale

Thescale(<x> [<y>]) transform function specifies a scale operation byx andy. Ify is not provided, it is assumed to be equal tox.

Example

html,body,svg {  height: 100%;}
html
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">  <!-- uniform scale -->  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />  <!-- vertical scale -->  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />  <!-- horizontal scale -->  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />  <!-- No scale -->  <circle cx="0" cy="0" r="10" fill="black" /></svg>

Rotate

Therotate(<a> [<x> <y>]) transform function specifies a rotation bya degrees about a given point. If optional parametersx andy are not supplied, the rotation is about the origin of the current user coordinate system. If optional parametersx andy are supplied, the rotation is about the point(x, y).

Example

html,body,svg {  height: 100%;}
html
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">  <rect x="0" y="0" width="10" height="10" />  <!-- rotation is done around the point 0,0 -->  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />  <!-- rotation is done around the point 10,10 -->  <rect    x="0"    y="0"    width="10"    height="10"    fill="green"    transform="rotate(100, 10, 10)" /></svg>

SkewX

TheskewX(<a>) transform function specifies a skew transformation along the x axis bya degrees.

Example

html,body,svg {  height: 100%;}
html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">  <rect x="-3" y="-3" width="6" height="6" />  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" /></svg>

SkewY

TheskewY(<a>) transform function specifies a skew transformation along the y axis bya degrees.

Example

html,body,svg {  height: 100%;}
html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">  <rect x="-3" y="-3" width="6" height="6" />  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" /></svg>

Specifications

Specification
CSS Transforms Module Level 1
# svg-transform
Scalable Vector Graphics (SVG) 2
# TransformProperty

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

[8]ページ先頭
©2009-2026 Movatter.jp