SVG Weblog

Polygon element(ポリゴン要素)と Polyline element (ポリライン要素)で描く

Polygon element と Polyline element には、points属性があります。 Polygonは下の図のように各点を結ぶ線の始点と終点が結ばれていますが、 Polylineは始点と終点が指定された位置になります。（黒い丸点はパスを分かり易く見えるようにしたものです。）

points = 図形を線で結ぶためのX軸Y軸を指定した各点

Continue reading

これは、SVG & Canvas で使われているMatrix Transformation をJavascript で計算して値を求めるためのツールです。そのMatrix値を使ってCanvas に描くようにしました。Matrix は、3×3ですので2Dです。3Dは4×4のマトリックスになります。

How to : & example
input value of translate(t_xt_y) ---> translate(50,40)
input value of scale(s_xs_y) ---> scale(2) or scale(1,-0.75)
input value of rotate(angle) ---> rotate(25)
input value of skewX(angle) ---> skew(-45)
"Get Matrix" button is to get values of Matrix Transformation
"Clear Text" button is to clear the textarea
"Draw Matrix" button is to redraw the image below
"Clear Canvas" button is to clear images which is drawn.

IEでも表示させるために Google の excanvas.js を使っていますが、excanvas.js に Matrixで描写するための setTransform 属性がないためにスクリプトを改造しています。しかし、IEでは、外側の赤い部分しか Matrix を Transform 出来ません。

Continue reading

skewX, skewY から構成されるスキュー・トランスフォーメーションは、その形状からシアリング(shearing) と呼ばれたりします。

skewX はX軸に対して、skewY はY軸に対して設定された角度分、図のようにオブジェクトを変形させます。

もし設定角度(angle)がマイナスの場合は、逆の方向になります。

Continue reading

Svg で書かれた懐かしのインベーダーゲームです。

グラフィックオブジェクトをECMAScipt で動かしています。SVGは、まだまだ発展途上の段階で大きな可能性を秘めています。 SVG2.0 でもっと自由度が増しそうです。

Invader game ©2007 simon place  方向キーを押してスタート

transform 属性の、scale のプロパティ値がマイナスになった場合、オブジェクトはミラーリング(mirroring)します。Chapter 9 の今回のセクションでは、これにrotate, translate などをミックスさせた位置関係を説明します。

Continue reading

Transform 属性の rotate プロパティは、オブジェクトを回転させるためのものですが、回転の軸(cx, cy)がどこにあるかで位置が変わります。rotate(angle, cx, cy) の cx, cy はオプションです。rotate(angle) と指定されてなければ、cx, cy はオブジェクトの x, y の位置になります。

circle 要素は、cx, cy の回転の軸が中心にあるため、このrotate プロパティはグラデーションやstroke-dasharrayなどのスタイル属性に対して有効になります。(ellipse要素は、X軸とY軸の半径（r) -->rx, ry があるので有効です）

Continue reading

transform 属性は、translate, rotate, scale, skewX, skewY の5つのプロパティから構成されています。

translate(tx, ty) はIDのある xlink:href 属性によってリンクされたオブジェクトをX軸(tx)、Y軸(ty)に移動させます。

rotate(angle)は、オブジェクトを回転させます。(Chapter9-2, 9-3)

scale(sx,sy)は、オブジェクトの大きさ(X軸にsx 倍, Y軸にsy 倍)を変更します。(Chapter9-1, 9-3)

skewX(angle)は、オブジェクトをX軸の方向に設定された角度分歪みを加えます。(Chapter9-4) skewY(angle)は、オブジェクトをY軸の方向に設定された角度分歪みを加えます。(Chapter9-4

Continue reading

SVG でカスケード・スタイル・シート(CSS)を利用する。

SVG ではCSSもサポートサポートされています。Style 属性で指定できるプロパティはスタイルタグ(<style>)の中で設定することが出来ます。Fill & Stroke プロパティの他に、線形グラデーション、放射グラデーション、Fillter Effect などがあります。

fill, fill-opacity, stroke, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, linerGradient, radialGradient,　Fillter, etc.

Continue reading

Group element(グループ要素)と Use element (Use 要素) を利用する

Group 要素は描いた図形をグループ化する役割があります。 Use 要素は、ID を持つ各オブジェクトを xlink:href 属性を使ってリンクによって何度でも使うことができます。これらの2つの要素は構造的に重要な役割を持ち、とても便利なので頻繁に使われます。

<use xlink="ID" .... />

Continue reading

Ellipse element(楕円要素)で描く

Ellipse 要素を使った面白いデザインの形を描いてみたいと思います。

Ellipse element の属性(attribute)は、cx, cy, rx, ry の4つの属性があります。

cx = Ellipseの 中心のX軸 (Center)
cy = Ellipseの 中心のY軸 (Center)
rx = Ellipseの X軸の半径 (Radius)
ry = Ellipseの Y軸の半径 (Radius)

Continue reading