path: root/files/ja/web/svg/attribute/transform/index.html

---
title: transform
slug: Web/SVG/Attribute/transform
tags:
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/transform
---
<div>{{SVGRef}}</div>

<p><strong><code>transform</code></strong> 属性は、要素とその要素の子に適用される変換定義のリストを定義します。</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;g fill="grey"
     transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1 0.5)"&gt;
    &lt;path id="heart" 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" /&gt;
  &lt;/g&gt;

  &lt;use xlink:href="#heart" fill="none" stroke="red"/&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<p class="note"><strong>Note:</strong> SVG2 では、 <code>transform</code> はプレゼンテーション属性であり、 CSS プロパティとして使用することができます。ただし、 CSS プロパティとこの属性との間には構文の違いがあるので注意が必要です。その場合に使用する具体的な構文については、 CSS プロパティの {{cssxref('transform')}} のドキュメントを参照してください。</p>

<p>プレゼンテーション属性ですので、 <strong><code>transform</code></strong> はあらゆる要素で使用することができます (SVG 1.1 では、 {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, {{SVGElement('use')}} の16要素でのみ使用することができました。)。</p>

<p>また、 SVG 1.1 からの遺物として、 {{SVGElement('linearGradient')}} と {{SVGElement('radialGradient')}} は <code>gradientTransform</code> 属性に対応しており、 {{SVGElement('pattern')}} は <code>patternTransform</code> 属性に対応しており、どちらも <code>transform</code> 属性と全く同じように動作します。</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">値</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Transform-list"><code>&lt;transform-list&gt;</code></a></strong></td>
  </tr>
  <tr>
   <th scope="row">既定値</th>
   <td><em>none</em></td>
  </tr>
  <tr>
   <th scope="row">アニメーション</th>
   <td>可</td>
  </tr>
 </tbody>
</table>

<h2 id="Transform_functions" name="Transform_functions">変換関数</h2>

<p>以下の変換関数は、 <code>transform</code> 属性の <var><code>&lt;transform-list&gt;</code></var> で使用することができます。</p>

<p class="warning"><strong>警告:</strong> 仕様書によれば、 CSS の<a href="/ja/docs/Web/CSS/transform-function">変換関数</a>も使用することができます。しかし、互換性は保証されていません。</p>

<h3 id="Matrix">Matrix</h3>

<p><code>matrix(<var>&lt;a&gt;</var> <var>&lt;b&gt;</var> <var>&lt;c&gt;</var> <var>&lt;d&gt;</var> <var>&lt;e&gt;</var> <var>&lt;f&gt;</var>)</code> 変換関数は、6つの値の変換行列の形式で変形を指定します。 <code>matrix(<var>a</var>,<var>b</var>,<var>c</var>,<var>d</var>,<var>e</var>,<var>f</var>)</code> は次の変換行列を適用することと等価です。 <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math> これは、前の座標系から新しい座標系への座標の写像を次の行列の等式によって行うものです。<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>newCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>newCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 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} </annotation></semantics></math></p>

<h4 id="Example" name="Example">例</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect x="10" y="10" width="30" height="20" fill="green" /&gt;

  &lt;!--
  In the following example we are applying the matrix:
  [a c e]    [3 -1 30]
  [b d f] =&gt; [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
  --&gt;
  &lt;rect x="10" y="10" width="30" height="20" fill="red"
        transform="matrix(3 1 -1 3 30 40)" /&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('Matrix', '100%', 200)}}</p>

<h3 id="Translate">Translate</h3>

<p><code>translate(<var>&lt;x&gt;</var> [<var>&lt;y&gt;</var>])</code> 変換関数は、オブジェクトを <code><var>x</var></code> と <code><var>y</var></code> によって移動します。 <code><var>y</var></code> が提供されなかった場合は、 <code>0</code> と見なします。</p>

<p>言い換えれば、次の通りです。</p>

<pre class="syntaxbox">    <code><var>x</var><sub>new</sub> = <var>x</var><sub>old</sub> + <var>&lt;x&gt;</var>
    <var>y</var><sub>new</sub> = <var>y</var><sub>old</sub> + <var>&lt;y&gt;</var></code>
</pre>

<h4 id="Example_2" name="Example_2">例</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- No translation --&gt;
  &lt;rect x="5" y="5" width="40" height="40" fill="green" /&gt;

  &lt;!-- Horizontal translation --&gt;
  &lt;rect x="5" y="5" width="40" height="40" fill="blue"
        transform="translate(50)" /&gt;

  &lt;!-- Vertical translation --&gt;
  &lt;rect x="5" y="5" width="40" height="40" fill="red"
        transform="translate(0 50)" /&gt;

  &lt;!-- Both horizontal and vertical translation --&gt;
  &lt;rect x="5" y="5" width="40" height="40" fill="yellow"
         transform="translate(50,50)" /&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('Translate', '100%', 200)}}</p>

<h3 id="Scale">Scale</h3>

<p><code>scale(<var>&lt;x&gt;</var> [<var>&lt;y&gt;</var>])</code> 変換関数は、 <code><var>x</var></code> と <code><var>y</var></code> による拡大縮小操作を指定します。 <code><var>y</var></code> が提供されなかった場合は、 <code><var>x</var></code> と同じと見なします。</p>

<h4 id="Example_3" name="Example_3">例</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- uniform scale --&gt;
  &lt;circle cx="0" cy="0" r="10" fill="red"
          transform="scale(4)" /&gt;

  &lt;!-- vertical scale --&gt;
  &lt;circle cx="0" cy="0" r="10" fill="yellow"
          transform="scale(1,4)" /&gt;

  &lt;!-- horizontal scale --&gt;
  &lt;circle cx="0" cy="0" r="10" fill="pink"
          transform="scale(4,1)" /&gt;

  &lt;!-- No scale --&gt;
  &lt;circle cx="0" cy="0" r="10" fill="black" /&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('Scale', '100%', 200)}}</p>

<h3 id="Rotate">Rotate</h3>

<p><code>rotate(<var>&lt;a&gt;</var> [<var>&lt;x&gt;</var> <var>&lt;y&gt;</var>])</code> 変換関数は、指定された点を軸に <code><var>a</var></code> 度の回転を指定します。オプションの引数 <code><var>x</var></code> と <code><var>y</var></code> が提供されなかった場合、回転は現在のユーザーの座標系の原点を基準に行われます。オプションの引数 <code><var>x</var></code> と <code><var>y</var></code> が指定された場合は、回転は <code>(<var>x</var>, <var>y</var>)</code> を基準に行われます。</p>

<h4 id="Example_4" name="Example_4">例</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect x="0" y="0" width="10" height="10" /&gt;

  &lt;!-- rotation is done around the point 0,0 --&gt;
  &lt;rect x="0" y="0" width="10" height="10" fill="red"
        transform="rotate(100)" /&gt;

  &lt;!-- rotation is done around the point 10,10 --&gt;
  &lt;rect x="0" y="0" width="10" height="10" fill="green"
        transform="rotate(100,10,10)" /&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('Rotate', '100%', 200)}}</p>

<h3 id="SkewX">SkewX</h3>

<p><code>skewX(<var>&lt;a&gt;</var>)</code> 変換関数は、 X 軸を基準に <code><var>a</var></code> 度の傾斜変換を指定します。</p>

<h4 id="Example_5">Example</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect x="-3" y="-3" width="6" height="6" /&gt;

  &lt;rect x="-3" y="-3" width="6" height="6" fill="red"
        transform="skewX(30)" /&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('SkewX', '100%', 200)}}</p>

<h3 id="SkewY">SkewY</h3>

<p><code>skewY(<var>&lt;a&gt;</var>)</code> 変換関数は、 Y 軸を基準に <code><var>a</var></code> 度の傾斜変換を指定します。</p>

<h4 id="Example_6" name="Example_6">例</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect x="-3" y="-3" width="6" height="6" /&gt;

  &lt;rect x="-3" y="-3" width="6" height="6" fill="red"
        transform="skewY(30)" /&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('SkewY', '100%', 200)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td>
   <td>{{Spec2('CSS Transforms 2')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>