English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG 転換はSVG画像内で作成された形状に適用されます。例えば、形状を移動、拡大、回転させます。垂直や斜めのテキストを表示する便利な方法です。
これはシンプルな例です：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" > </rect> <text x="70" y="100" transform="translate(30) rotate(45 50 50)" >oldtoolbag.com</text> </svg>テストを見て‹/›
実行後の画像効果：
注意<rect>要素のtransform および <text>のtransform属性です。この属性は、形状に適用する変換を指定します。この例では、平移と回転が適用されています。どちらも本文の後で説明します。
変換をすべてのSVG形状に適用できます。また、変換を以下に適用することもできます。<g>
要素に変換を適用することができます。要素グループ全体を一括で効果的に変換することもできます。また、グラデーションや塗り絵パターンにも変換を適用できます。
SVGは4つの変換関数を提供します：
translate()
rotate()
scale()
skew()
matrix()
以下の各節では、これらの関数のそれぞれについてさらに詳細に説明します。
実際には、変換関数はSVG形状を自動的に変換することはなく、その形状の基準座標系を変換します。したがって、幅が倍数で表示されている場合でも、幅20乗以2の形状は論理的にはまだ20の幅。
translate()関数を使用して形状を移動させます。以下に移動します。x および y 値を渡します。translate()関数です。これは以下の例です：
translate(50,25)
この例では、形状をx軸に沿って移動させます。50ユニット、y軸に沿って移動25ユニット。
これは、位置が等しく大きさも等しい二つの形状が平移があるかないかを示す例です：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)"></rect> </svg>テストを見て‹/›
実行後の画像効果：
注意していただきたいのは、最初の（赤い）形状と比較して、第二の（青い）形状がx軸に沿って移動していることです。75ユニット、y軸に沿って移動25ユニット。
rotate()関数は点0,0を中心に形状を回転させます。これは矩形（輪郭）と回転の例です。15度の回転後の等価な矩形（塗りつぶし）：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" ></rect> </svg>テストを見て‹/›
実行後の画像効果：
0,0以外の他の点で回転する場合、その点のxおよびy座標を渡します。transform関数。以下に示すように、非回転の矩形（輪郭）と中心を中心に回転した等しい矩形（実線）が表示されています。15度：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15, 40, 40)" ></rect> </svg>テストを見て‹/›
実行後の画像効果：
すべての回転は時計回りで、度数は0から360。反時計回りに回転する場合は、負の度数を渡します。rotate()関数。
scale()関数は形状を比例的に拡大または縮小します。scale()関数は形状の寸法および位置座標を拡大または縮小できます。したがって、20乗以2の倍の幅を拡大または縮小します。20で、高さが30の矩形が以下に位置しています。20,20で、幅が40で、高さが60。
scale()関数は形状の線の太さも拡大または縮小できます。
これは、以下に位置する矩形の例です：10、0で、高さが20で、高さが20の矩形（青色）および、等比例の矩形（黒色）のスケール比2：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"></rect> </svg>テストを見て‹/›
実行後の画像効果：
注意していただきたいのは、矩形の位置と大きさがどのようにスケールされるかです。
x軸とy軸に沿って他の因子で形状をスケールする方法です。これを行うために、scale()関数はx-scaleとy-scaleパラメータは以下の通りです：
scale(2,3);
この例では、x軸に沿って形状をスケール2倍、y軸に沿って形状をスケール3倍。以下に例を示します：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)"></rect> </svg>テストを見て‹/›
実行後の画像効果：
注意していただきたいのは、スケールされた矩形（黒色）の線の太さもどのようにスケールされるか、x軸とy軸のスケール比が異なることです。
scale()x軸またはy軸に沿って-1スケール比，
この関数をミラーファンクションとして使用する場合、まずxまたはy方向に形状を移動（平移）する必要があります。さもなければ、ミラーシャペいはSVGキャンバスの外部に現れます。
以下に例を示します：
<svg width="500" height="150"> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #3333cc; fill:none;" /> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #000000; fill:none;" transform="translate(100, 0) scale(-1, 1) " /></svg>テストを見て‹/›
これはx = 100で描かれた線の結果画像です（なぜなら、矩形はx方向に平移されているからです）100）。
青は元の形状です。黒い形状はスケールされた平移された形状です。
skewX()およびskewY()関数はx軸とy軸を偏斜します。実際には、これらの関数は指定された角度（度単位）に基づいて指定された軸を倾斜します。
以下に、異なるskewX()値の矩形のいくつかの例です。
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" /></svg>テストを見て‹/›
実行後の画像効果：
ご覧の通り、skewX()関数は垂直線が指定された角度で回転しているように見えるようにします。したがって、skewY()水平線が指定された角度で回転しているように見える関数です。以下にいくつかの例があります：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" /></svg>テストを見て‹/›
もマトリックスとして変換を表現できます。以下にマトリックスを示します：
a c e b d f 0 0 1
指定できるのは前6の値です、したがってマトリックス変換関数には提供できます6の値です。以下に例を挙げます：
transform="matrix(a,b,c,d,e,f)"
他の変換関数もマトリックスで表現できます。以下にいくつかの例を挙げます：
Translate 1 0 tx 0 1 ,ty 0 0 1 matrix(1,0,0,1,tx,ty)
Rotate cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
注：この値cos(a)およびsin(a)このパラメータは、挿入する前に事前に計算する必要があります。aは回転角度です。
Scale sx 0 0 0 sy 0 0 0 1 matrix(sx,0,0,sy,0,0)
x軸沿いの歪み変換は以下のように書かれます：
Skew 1 tan(a) 0 0 1 0 0 0 1 matrix(1,0,tan(a),1,0,0)
tan(a)値が挿入されるmatrix()関数はその前に事前に計算する必要があります。
y軸沿いの歪み変換は以下のように表されます：
Skew 1 0 0 tan(a) 1 0 0 0 1 matrix(1,tan(a),0,1,0,0)
これはシンプルな変換機能を模倣したSVGマトリックス変換の例です：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)" /> </svg>テストを見て‹/›
実行後の画像効果：
左側（赤色）の矩形と比較して、右側の矩形（青色）の変換を見てください。
変換を組み合わせます。以下で、transform複数の変換関数を属性内に配置することで実現できます。
これはまず平移（移動）してから回転した矩形の例です。この例では、変換を適用する前に後（黒色）の矩形（青色）を示しています。
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(50,0) rotate(30)" /> </svg>テストを見て‹/›
実行後の画像効果：
変換の順序は重要です。以下では、transform属性内で指定する変換関数の順序は、それらが形状に適用される順序です。
以下例では、まず平移してから回転、さらにまず回転してから平移した形状の違いを説明します：
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; stroke-width: 2px; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; stroke-width: 2px; fill:none;" transform="translate(100,0) rotate(45)" /> <rect x="50" y="10" width="20" height="30" style="stroke: #cc3333; stroke-width: 2px; fill:none;" transform="rotate(45) translate(100,0)" /> </svg>テストを見て‹/›
実行後の画像効果：
黑色の矩形には任何の変換が適用されていません。まず青色の矩形を平移し、次に回転します。まず赤色の矩形を回転し、次に平移します。