【中級講座】 ボタンやオブジェクトの改造方法（１）
この講座でも最初は基礎知識を理解して貰うためにＸＭＬファイルの構造や、
実際の改造の手順について書いてみます。
つまらないかも知れませんがお付き合い下さい。
今回は選択と決定の色を変えてみましょう。
ボタンやオブジェクトはＸＭＬファイルで記述されているので、
テンプレートと同様にこの作業から始めます。
１．ＸＭＬファイルの可視化
「テンプレートの改造で詳しく書いてあるので、それを参照して下さい。」と、
書いて置けば成立はするのですがあんまりなので軽く説明します。
ＸＭＬファイルに対応したエディターを持っていない場合は、
メモ帳などのテキストエディターで編集できる形に修正する必要があります。
修正の仕方はＸＭＬの改行のポイントで改行するだけですが、
この説明が【初級講座】テンプレートの改造方法（１）の、
１．ＸＭＬファイルの可視化にかいてあります。
詳細は【初級講座】テンプレートの改造方法（１）を参照して下さい。
２．大まかな構成を覚えましょう
ボタンやオブジェクトのＸＭＬファイルは表示に関わるブロックと、
設定（パラメーターなど）に関わるブロックの二つに分けられます。
設定のブロックにはパラメータの部分とサイズに関する部分が存在します。
構成的にはテンプレートより簡単なのですが、
ほとんどイジれないテンプレートに比べて、
自由度の高いボタンやオブジェクトの方が、難易度は高いと感じています。
上のブロックが枠（四角）や画像、グラフィック等の表示を管理する部分で、
下がパラメーターの入力を管理するブロックになります。
初期値とサイズの指定は任意ですが、最小値にある程度の大きさを指定しないと、
ボタンが消えると言う良くあるミスに繋がります。
ボタンの画像を構成する要素（線や枠と画像など）は多彩なのでおいおい説明するとして、
パラメーターの管理は次の様なブロックで指定します。
これらを幾つか組み合わせる事で画像を制御する訳です。
タイトル名はプロパティ画面の項目名なのでほぼ意味は無いのですが、
次の変数名は外部変数命でもあり、表示する要素と入力を繋ぐ部分なので重要です。
種別は文字とか数値などの種類の事で、
表示要素の名前は線とか枠とかに個別に付けたＩＤ（名前）の事です。
項目名は前述の要素のどの項目（例えば線の太さ等）かを示しています。
「chaneable」以下の項目は、通常／選択／実行時で変化する場合の指定方法で、
現在のところ色でしか成功していません。
ノーマルが通常時、ハイライテッドが選択時、セレクッテッドが実行時を意味します。
もちろんこれはデフォルト値なので手入力で変更が可能です。
ちなみに、この色の組み合わせは１メニュー当たり三つまでと決められている様で、
それを超えるとエラーになって落ちていたそうですが、
現在は無理やり書き換えて統一させている可能性（私調べ）が有ります。
このブロックを表示要素の変化させたい項目（属性）の数だけ、
パラメーターの管理ブロック内に追加すれば、
その属性を変化させられると言う仕掛けです。
３．それでは色を変えてみましょう
色は種別に「colour」（何故かＵが多いものが多数）と書いてあるもので、
「chaneable」の指定があれば通常／選択／実行時で変化する部分です。
さほど長いファイルでは無いので、検索機能を使うほどでは無いと思います。
後は上記の説明を参考にして数値を変更するだけです。
１６進数に馴染みがない人は苦労するかも知れませんが、
慣れている人なら簡単な作業です。
＃の後にＲＧＢ（赤／緑／青）の順で１～２５５の数値を指定する事にになります。
セーフカラーの表を持っていたら参考にすれば良いかも知れません。
後はテンプレートの所でも書いたのですが、必ず上書きで保存して下さい。
ボタンやオブジェクトの入っていたフォルダにコピーすれば、
自動で読み込まれるので特に登録する必要もありません。
【注】DvdStylerの画面左側のボタンの表示の順番は登録制なので、
この順番を替える場合にのみ登録が必要になります。
「DvdStyler」の「buttons」フォルダの「buttons.lst」と言うファイルに、
ファイル名を登録した順番に表示されるのでテキストエディター等で編集して下さい。
未登録のボタンは登録済みのボタンの後にアルファベット順に表示されます。
【中級講座】 ボタンやオブジェクトの改造方法（２）
この記事は表示の管理ブロックで使用する描画要素の解説です。
描画要素とそのパラメーター（属性）について説明しますが、
全てを把握している訳では無いので注意して下さい。
１．描画要素の種類
描画要素は大きく分けると３種類に分類出来ます。
通常のもの、外部のイメージ（静止画像や動画）、
ドロー系の絵画ソフトで使用される描画コマンドの３つです。
描画はされないが他の要素から参照されるサブの要素もあります。
現在把握している描画要素をこの分類で分けてみました。
１．通常の描画要素
text, rect, shadow, line, polyline, polygon, circle, ellipse
２．外部イメージ
image
３．ドロー系描画コマンド
path,
４．その他（サブ要素）
linearGradient, radialGradient, clipPath, filter
実際は（描画コマンドとかが）まだ沢山在るハズですが、
存在とその内容がある程度まで把握できている、
これらについて説明して行きます。
実はこれ以外にも特殊な（管理だけで描画されない）ものが在りますが、
それらは改造講座（４）で解説します。
２．ＴＥＸＴ（文字）
見出しは見易い大文字にしましたが実際は「text」です。
最初にこれを選んだ理由は詳しい説明しない事に決めたからで、
その理由の説明とお詫びをする為です。
文字の属性であるフォントと呼ばれる概念には表示属性を含む為に、
その説明は多岐にわたり、本が出せる分量になってしまいます。
このページで書ききれる分量でも無いし、
私もそれ程知っている訳でもないので、単純な例だけで勘弁して下さい。
ＴＥＸＴタグの例を書いてみると次の様になります。
“<text id="識別名" x="0" y="0" width="100" height="50"
fill="文字の色" フォントの属性…>初期値</text>“
「x,y」が座標で、「width,height」がサイズなのはお判りでしょうが、
「fill」は塗り潰す色という意味になります。
この他に「stroke,stroke-width」という枠線を指定する属性もあります。
フォントの属性で説明するのは以下の4つです。
１．「font-family」 フォント名を指定（漢字は使用不可）
２．「font-size」 文字の大きさをポイント数で指定
３．「font-weight」 通常（normal）や太字（bold）や斜体（italic）の指定
４．「text-anchor」 左寄せ（start）や中央（middle）や右寄せ（end）の指定
３．ＲＥＣＴ（長方形／枠）
見出しは見易い大文字にしましたが実際は「rect」です。
長方形の英語「Rectangle」の省略形だと思われます。
ＲＥＣＴタグの例を書いてみると次の様になります。
"<rect id="識別名" x="0" y="0" width="100" height="50"
fill="塗り潰す色" stroke="枠線の色" stroke-width="枠線の太さ" />"
「x,y」が座標で、「width,height」がサイズなのはお判りでしょうが、
「fill」は内側を塗り潰す色という意味になります。
「stroke,stroke-width」は枠線の色と太さの指定です。
この他に「rx,ry」という角の丸めを指定する属性もあります。
「clip-path」属性が使えたのでクリップ領域を使用する事で、
角丸めの時のはみ出しを修正出来ました。
４．ＳＨＡＤＯＷ（影）
文字や図形（枠の線など）に影を付ける要素です。
実際にはＴＥＸＴやＲＥＣＴ等の描画要素のサブとなるもので、
独自に存在する要素ではありません。
ＦＩＬＴＥＲと言う要素を事前登録する必要があります。
ＳＨＡＤＯＷの例（ＲＥＣＴ版）を書いてみると次の様になります。
［事前定義］
<filter id="shadowFilter">
<feGaussianBlur stdDeviation="3" />
</filter>
［描画部分］
"<use id="shadow" xlink:href="#rect" x="2" y="2"
style="visibility:hidden;fill:none;stroke:#404040;filter:url(#shadowFilter)" />"
「visibility」が表示するかどうか、「stroke」が影の色、
「x,y」がズラす位置（量）だと思われます。
フィルター側の内容は不明なので解説できませんが、
おそらくこの部分がぼかしの本体です。
「stroke（枠線の色）」の転用などの関係か、
改造が上手く行かない場合があるので注意して下さい。
「事前定義／ＵＳＥ／ＳＴＹＬＥ」
これらは改造講座（４）を参照して下さい。
５．ＬＩＮＥ（直線／点線）
見出しは見易い大文字にしましたが実際は「line」です。
直線や点線を描くための要素です。
ＬＩＮＥタグの例を書いてみると次の様になります。
"<line x1="10" y1="10" x2="100" y2="20" stroke="black" stroke-width="2"/>"
「x1,y1」で開始点、「x2,y2」で終了点を指定して、
「stroke」で線の色を、「stroke-width」で線の太さを指定します。
（注）この座標系は入力に対応していない可能性があります。
「stroke-dasharray」で実線と間隔を指定すると点線になります。
（例）stroke-dasharray="10,5"
（注）「stroke-dasharray」属性は他の要素でも使用可能です。
６．ＰＯＬＹＬＩＮＥ（折れ線／連続する線）
見出しは見易い大文字にしましたが実際は「polyline」です。
折れ線（連続する複数の線）を描くための要素です。
ＰＯＬＹＬＩＮＥタグの例を書いてみると次の様になります。
"<polyline points="10,10 50,10 80,20" stroke="black"/>"
「points」に座標のリストを指定する形式で、グラフィックと同じ方式です。
「stroke,stroke-width」等の枠線系の属性も使用可能です。
７．ＰＯＬＹＧＯＮ（多角形）
見出しは見易い大文字にしましたが実際は「polygon」です。
多角形を描くための要素です。
ＰＯＬＹＧＯＮタグの例を書いてみると次の様になります。
"<polygon points="10,5 30,5 20,20" stroke="black" fill="none"/>"
「points」はＰＯＬＹＬＩＮＥと同じ形式ですが、最後の点と開始点を結ぶ線が追加されます。
「fill」や「stroke」系の属性も使用可能です。
８．ＣＩＲＣＬＥ（円／丸）
見出しは見易い大文字にしましたが実際は「circle」です。
円（真円）を描くための要素です。
ＣＩＲＣＬＥタグの例を書いてみると次の様になります。
"<circle id="circle" cx="50%" cy="50%" r="5" fill="none"/>"
（注）数値の設定には絶対指定の他にこの例のように、
”50%”等の相対指定が可能な部分（座標とサイズなど）があります。
円と楕円は座標系が中心点の指定の「cx,cy」となりますが、
一部対応していないものが存在するので注意が必要です。
また半径を示す「r」はＣＩＲＣＬＥ独自の属性となります。
「fill」は他の要素と同じで塗り潰す色です。
「stroke,storoke-width」の外枠の指定も可能ですが、
「chaneable<」で実行時に上書きされる場合は、
外周を含む全ての部分が塗り潰されるので注意が必要です。
９．ＥＬＬＩＰＳＥ（楕円）
見出しは見易い大文字にしましたが実際は「ellipse」です。
楕円を描くための要素です。
ＥＬＬＩＰＳＥタグの例を書いてみると次の様になります。
"<ellipse id="ellipse0" cx="50%" cy="50%" rx="45%" ry="45%" fill="none" />"
円と楕円は座標系が中心点の指定の「cx,cy」となりますが、
一部対応していないものが存在するので注意が必要です。
「rx,ry」は角の丸めと同じで半径を指定する属性です。
「fill」は他の要素と同じで塗り潰す色です。
「stroke,stroke-width」の外枠の指定も可能ですが、
「chaneable<」で実行時に上書きされる場合は円と同じで、
外周を含む全ての部分が塗り潰されるので注意が必要です。
１０．ＩＭＡＧＥ（画像／動画）
見出しは見易い大文字にしましたが実際は「image」です。
外部の画像を表示させる要素になります。
ＤｖｄＳｔｙｌｅｒに映像を取り込んだ後には、
その内の一部の動画や静止画像も表示させる事が可能です。
ＩＭＡＧＥタグの例を書いてみると次の様になります。
［事前定義］（clipPath使用時のみ）
<clipPath id="cp" >
<rect id="rect0" x="5%" y="5%" width="90%" height="90%" rx="5" ry="5"/>
</clipPath>
［描画部分］
"<image id="image" x="5%" y="5%" width="90%" height="90%"
opacity="1.0" preserveAspectRatio="xmidymid slice" clip-path="url(#cp)"/>"
（注）この例では「xlink:href」が初期設定で自動入力されるので省略されています。
「x,y」が座標で、「width,height」がサイズなのはお判りでしょうが、
「xlink:href」は外部の画像や取り込んだ映像へのリンクになります。
「opacity」は透過度の指定になります。
「preserveAspectRatio」は横縦比を保持する場合の指定です。
「none」だと横縦比を保持しない事になります。
指定する場合は位置合わせの仕方で、「x,y」共に「min,mid,max」が指定出来ます。
「min」が左上の原点、「max」が右下の終点、「mid」が中央です。
画像の表示形式の「slice」は枠からはみ出す部分をカットする指定で、
「meet」だと（必要な場合は余白を付加して）全体を表示します。
"xmidymid slice"はプロパティ画面のデフォルトと同じ設定です。
「clip-path」は四角ではない（角の丸めを含む）場合のマスキングの指定で、
別途マスクとなる要素（clipPath）を定義する必要があります。
「事前定義」は改造講座（４）を参照して下さい。
１１．ＰＡＴＨ（描線コマンド）
見出しは見易い大文字にしましたが実際は「path」です。
ドロー系描画コマンドで確認されているのはこれ一つのみです。
ＰＡＴＨタグの例を書いてみると次の様になります。
"<path id="arrow2" d="M18,14 h-9 v4 h9 l0,5 l10,-7 l-10,-7 z"
style="fill:#8080F0;stroke:none;stroke-width:1;stroke-linejoin:round;" />"
この要素は特殊で位置（座標）やサイズの指定が出来ません。
「d」が図形を定義する部分で、「style」でまとめているのが共通の属性になります。
他の要素との共通属性はそちらを参照して貰うとして、
「stroke-linejoin」は特殊なので説明すると、線がクロスする部分の処理方法のです。
普通はこのままで構わないので、おまじないだと思って指定しておいて下さい。
図形の定義は未確認ですが、分かる範囲だと以下のような意味だと思います。
１．M （例）M10,20
線の開始点を座標で指定／指定された座標まで線を引く
２．L （例）L10,20
指定された座標まで線を引く（Mと同じ）
3．H （例）h10
横線を移動量で指定
４．V （例）v10
縦線を移動量で指定
５．Ｑ （例）q20,10 20,20
２点（ＬＰを含めて３座標）で２次ベジェ曲線を指定
６．C （例）c10,10 20,10 20,20
３点（ＬＰを含めて４座標）で３次ベジェ曲線を指定
７．指定なし（省略） （例）10,20
（斜め）線を移動量で指定（mと同じか？）
８．z （例）z
開始点に戻る（線を引く）
アルファベットの大文字でユーザー座標系での絶対座標、
小文字でＬＰ（前のコマンドの終了座標）からの相対座標になります。
この他にA（円弧）が見付かりましたが、複雑なので解析中です。
【参考資料】ベジェ曲線の原理説明はこのサイトを参照して下さい。
中学生でもわかるベジェ曲線
１２．その他（サブ要素）
「linearGradient, radialGradient」この２つはグラデーションです。
「linearGradient」が四角で、「radialGradient」が丸い形の、
内側がグラデーションの画像を作成します。
「fill」や「stroke」等に「url(#定義した名前)」の形で使用するものです。
従って事前定義をするのが普通だと思います。
ＬＩＮＥＡＲＧＲＡＤＩＥＮＴの例を書いてみると次の様になります。
<linearGradient id="gradient1" x1=".5" y1="0" x2=".5" y2="1">
<stop id="st1" offset="0%" stop-color="#8080ff" stop-opacity=".6" />
<stop id="st2" offset="100%" stop-color="#0000ff" stop-opacity=".75" />
</linearGradient>
詳細は不明なのですが「stop」が色と位置の指定のようです。
悪いのですが（詳細が不明なので）今回は説明を避けさせて頂きます。
「clipPath」はＩＭＡＧＥで説明したので割愛させて貰います。
「filter」もＳＨＡＤＯＷで説明したもの以外が見当たらないので割愛させて貰います。
【中級講座】 ボタンやオブジェクトの改造方法（３）
この記事はパラメーターの管理ブロックで使用する個々の管理ブロックの解説です。
管理ブロックの種別とその使い方について説明しますが、
全てを把握している訳では無いので注意して下さい。
管理ブロックの構成とその内容の説明は「ボタンやオブジェクトの改造方法（１）」の、
全体の構造の説明で行なっているので、そちらを参照して下さい。
１．管理ブロックの種別
管理ブロックは基本的に属性の変更を行なう為のものです。
「chaneable」で表示の変更を指定した場合にのみ特殊な働きをします。
ここで扱う変数の種類は以下の８種類になります。
［ text, colour, image, shadow, string, integer, decimal, percent ］。
各々の説明は個別に行います。
前半の４つは定義済みのグループ化された変数なので、
１つで複数の属性を取り扱うものです。
２．ＴＥＸＴ（文字関連の設定）
見出しは見易い大文字にしましたが実際は「text」です。
文字列とフォントや書式を扱う変数です。
フォントや書式の属性で指定出来るのは以下の4つです。
１．「font-family」 フォント名を指定（漢字は使用不可）
２．「font-size」 文字の大きさをポイント数で指定
３．「font-weight」 通常（normal）や太字（bold）や斜体（italic）の指定
４．「text-anchor」 左寄せ（start）や中央（middle）や右寄せ（end）の指定
文字列を含めたこの５つの属性を一元管理する為の変数です。
３．ＣＯＬＯＵＲ（色属性の設定）
見出しは見易い大文字にしましたが実際は「colour」です。
各種の色とその透過率を扱う変数です。
「chaneable」の指定をすると、「通常／選択／実行」の三色になり、
（表示能力の関連か）透過率は指定出来なくなります。
４．ＩＭＡＧＥ（画像／動画）
見出しは見易い大文字にしましたが実際は「image」です。
外部の画像や取り込んだ映像を扱う変数です。
外部画像の場合はファイル名を指定するだけです。
「DvdStyler」に映像（動画）を取り込むと、
映像の中の画像や動画が使用可能になります。
この場合は表示方法も指定できる様になっています。
表示方法で選択可能なのは以下の項目です。
１．「横縦比を保持する」 これを有効にすると他の項目も指定できます。
無効にした場合は単純にサイズに合わせたズーム（拡大／縮小）画像になります。
２．「左寄せ／左右中央／右寄せ」 左右の（はみ出す場合の）位置調整です。
３．「上寄せ／上下中央／下寄せ」 上下の（はみ出す場合の）位置調整です。
4．「画像全体を表示／画面に合わせて切り取り」
画像を枠に入るサイズに縮小するか、枠からはみ出す部分をカットするかです。
残念ですがこれらの項目（属性）名は判明していないので、
現在のところ個々の指定は出来ていません。 動画関連も同様です。
５．ＳＨＡＤＯＷ（影関連の設定）
見出しは見易い大文字にしましたが実際は「shadow」です。
影の表示関連を扱う変数です。
影の色とズラす位置、ぼかし方等が指定できます。
ただ現状は詳細が分からないので個々の属性では扱えません。
事前定義した要素に対してこの要素で影を付けると、
事前要素の枠線の色が選択されるバグがあります。
６．ＳＴＲＩＮＧ（文字型変数の指定）
見出しは見易い大文字にしましたが実際は「string」です。
ＴＥＸＴとは異なり文字列そのものを扱う変数です。
実はＸＭＬで扱えるのは文字だけなので、
文字型であれば全ての属性が扱えますが、
チェックが出来ないので使用は控えて下さい。
使う必要（場面）の特に無いものです。
７．ＩＮＴＥＧＥＲ（整数型変数の指定）
見出しは見易い大文字にしましたが実際は「integer」です。
小数部を持たない数値を扱う変数です。
数値型の変数には３種全て最小値と最大値を指定して範囲を限定する、
指定方法があるので例を示します。
integer(最小値,最大値) （例）integer(0,360)
この「integer」の部分を、「decimal」や「percent」に変えると、
それぞれの指定方法になります。
８．ＤＥＣＩＭＡＬ（実数型変数の指定）
見出しは見易い大文字にしましたが実際は「decimal」です。
「decimal」の意味は１０進数で、普通の数字です。
実数型の意味は整数と少数の両方をを扱うものです。
９．ＰＥＲＣＥＮＴ（百分率型変数の指定）
見出しは見易い大文字にしましたが実際は「percent」です。
％（百分率）で表す数値を扱う変数です。
（つまり何パーセントかという事ですね。）
【中級講座】 ボタンやオブジェクトの改造方法（４）
この記事は特殊な描画要素についての解説です。
直接には描画されず、
他の描画要素を管理する目的で使用される要素をまとめています。
また特殊な属性もこちらで説明する事にしました。
１．ＳＶＧ（表示エリアの定義）
見出しは見易い大文字にしましたが実際は「svg」です。
一番外側の「svg」は「DvdStyler」が管理する（赤で表示される）四角のエリアです。
このエリアの属性は「DvdStyler」に変更されるので、
位置やサイズを指定しても意味がありません。
ネストさせる事も可能ですが、位置の指定が出来ないので、
使い方が判らない状態で放置しています。
グラフィックのビューポートの設定以外に使う理由が考え付きません。
開始と終了のタグが必要なので例を示します。
<svg> 複数の表示要素 </svg>
２．Ｇ（グループ化）
見出しは見易い大文字にしましたが実際は「g」です。
いくつかの表示要素を一つにまとめる（グループ化する）時に使用します。
事前定義（ＤＥＦ）でまとめて、ＵＳＥで参照する形にすると、
複数の要素を同時に移動させたりする事が可能になります。
ただ「chaneable」の対応に問題が在って、色が変わらない現象が見られました。
開始と終了のタグが必要なので例を示します。
<g> 複数の表示要素 </g>
３．ＳＹＭＢＯＬ（事前定義用グループ）
見出しは見易い大文字にしましたが実際は「symbol」です。
いくつかの表示要素を一つにまとめる（グループ化する）時に使用します。
事前定義（ＤＥＦ）でしか使えないので、ＵＳＥで参照する形になります。
開始と終了のタグが必要なので例を示します。
<symbol> 複数の表示要素 </symbol>
４．ＤＥＦ（事前定義ブロック）
見出しは見易い大文字にしましたが実際は「deｆ」です。
事前定義の開始と終了を定義するタグです。
表示する要素の共通な部分を事前に定義して置き、
参照（ＵＳＥ）する時点で残りの属性を追加する方法です。
事前定義された部分は画面上に表示されません。
開始と終了のタグが必要なので例を示します。
<def> 複数の表示要素（共通部分） </def>
５．ＵＳＥ（参照／呼び出し）
見出しは見易い大文字にしましたが実際は「use」です。
事前定義した表示要素を呼び出すタグです。
ＤＥＦブロックに事前定義している各要素をＩＤを使用して参照し、
実際に表示させる為のものです。
（この時点で個別の属性を付加したりもします。）
ただし、いくつかの属性（円の中心座標など）には、
対応しきれていないので注意が必要となります。
使い方の例（タグ）を示します。
<use id="項目の名前" xlnk:href="#事前定義しているＩＤ"
x="0" y="0" style="個別の属性（複数指定も可能）"/>
「x,y」が座標で、「xlnk:href」が事前定義している要素のＩＤです。
属性を「style」でまとめましたが個別表記でも構いません。
６．ＳＴＹＬＥ（複数の属性の一括設定）
見出しは見易い大文字にしましたが実際は「style」です。
上記の様に、タグ内で複数の属性の一括設定をする為の要素です。
個々の要素を別々に記述する場合との違いを説明します。
別々に記述する場合の例。
項目（属性）名="設定する値"
ＳＴＹＬＥでまとめて記述する場合の例。
style="項目（属性）名1:設定する値1;項目（属性）名２:設定する値２;…"
見辛いので言葉で説明すると、
項目名の後にコロン（：）を付けて値を続けて書いて、
最後にセミコロン（；）を付けて一項目分の終了です。
これを必要な項目分続けて記述する方式です。
７．ＯＰＡＣＩＴＹ（透過率）
見出しは見易い大文字にしましたが実際は「opacity」です。
画像や塗り潰しなどの透過率を指定するものです。
多くの他の属性と複合した複合要素が確認されています。
「opacity」と複合化した要素の例です。
fill-opacity
stroke-opacity
stop-opacity
各々の内容は各要素の説明を参考にして下さい。
８．ＴＲＡＮＳＦＯＲＭ（変形）
見出しは見易い大文字にしましたが実際は「transform」です。
現在以下の６種類が確認されています。
［ translate scale rotate skewX skewY matrix ］
「translate」は位置をズラすもので、「scale」は拡大、「rotate」は回転させるものです。
「skewX」と「skewY」はそれぞれの方向に画像を傾けるものです。
「matrix」は情報が不完全だったので今回はパスさせて貰います。
位置をズラす場合の例。
transform="translate(0,10)"
「translate」の引数はＸ方向とＹ方向の移動量です。
拡大させる場合の例。
transform="scale(2)"
「scale」の引数は倍率（何倍にするか）です。
回転させる場合の例。
transform="rotate(180,0,0)"
「rotate」の引数は回転角と中心点の相対座標（x,y）です。
画像を傾ける場合の例。
transform="skewX(20)"
「skewX」と「skewY」の引数は傾ける角度です。
ＴＲＡＮＳＦＯＲＭへの入力は管理ブロックのに以下のように指定します。
<attribute>transform#1</attribute> （１番目の引数の場合。）
ＴＲＡＮＳＦＯＲＭの後に続けてナンバー（＃）と引数の順番です。
成功しないケースも有るので注意して下さい。