忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

座標系を変換するには transform 属性を利用する。

transform
 属性の値は、変換定義のリストとして定義される <transform-list> で指定され,各変換はリストに現れる順番に適用される。 個々の変換定義は、空白または(空白混じりの)コンマで区切られる。 変換定義には、次に挙げるものを利用できる:

matrix(<a> <b> <c> <d> <e> <f>)
6個の値で与えられる 変換行列 の形式による変換を指定する。 
matrix(a,b,c,d,e,f) は変換行列 [a b c d e f] を適用することに等しい。
translate(<tx> [<ty>])
txty による 並進 を指定する。 
<ty> が与えられていない場合、 0 とみなされる。
scale(<sx> [<sy>])
sxsy による 伸縮 を指定する。 
<sy> が与えられていない場合は <sx> に等しいものとみなされる。
rotate(<rotate-angle> [<cx> <cy>])
与えられた点を中心とする角度 <rotate-angle> による 回転 を指定する。 
<cx><cy> が与えられていない場合、回転は現在の利用座標系の原点を中心とする。 この場合、変換行列は [cos(a) sin(a) -sin(a) cos(a) 0 0] に等しい。 
もし <cx><cy> が与えられているならば、回転は点 (cxcy) を中心とする。 この変換は次の変換と同値になる: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>)
skewX(<skew-angle>)
X 軸に沿う斜傾変換 を指定する。
skewY(<skew-angle>)
Y 軸に沿う斜傾変換 を指定する。

すべての数値は <number> である。

もし変換のリストが与えられた場合、全体としての効果は,各変換が与えられた順番に別々に指定されたときと同じになる。 例えば:

<g transform="translate(-10,-20) scale(2) rotate(45) 
                                     translate(5,10)">
  <!-- グラフィックス要素はここに -->
</g>

この記事にコメントする
name
title
color
mail
URL
comment
pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (チェックを入れると管理人だけに表示できます)
ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
03 2017/04 05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]