USING SVG TO CREATE A FISH ANIMATING AROUND A TRIANGLE

XỬ DỤNG SVG ĐỂ VẼ MỘT CON CÁ ĐANG CHUYỂN ĐỘNG CHUNG QUANH HÌNH TAM GIÁC

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="100%" height="100%">

<g> //Viết code nầy sẽ xuất hịên hìn tam giác.

<path id="uphill" d="M 80 200,L 160 100,320 250 Z"

stroke="darkgreen" stroke-width="4" fill="none"/>

</g>

<g transform="translate(-160,-160)">

<path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150,

          C 175 150,185 160,180 170 z"

          stroke="red" stroke-width="2" fill="green"/>

<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>

<animateMotion dur="10" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#uphill"/>

</animateMotion>

</g>

</svg>

GHI CHÚ HƯỚNG DẪN.

SVG là ngôn ngữ dùng để vẽ hình hai chiều viết theo XML.

1-Trước khi vẽ phải viết phía trên tên của tiêu chuẩn quốc tế W3 / SVG sẽ áp dụng như sau.Nếu thiếu sót browser sẽ không hổ trợ vì không biết theo tiêu chuẩn nào và phải ấn định phạm vi không hạn chệ về chiều ngang và chiều dọc khi vẽ.

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink=http://www.w3.org/1999/xlink

width="100%" height="100%">

2-CÁCH VẼ HÌNH TAM GIÁC CHỨA TRONG  <g> …</g>

Đặt tên cho hình vẽ là path id ="uphill".

Vẽ bằng cách tự do chọn tọa độ.

d nghĩa là depart, M nghĩa là move.to là mệnh lệnh. Bắt buộc phải có M

Toạ độ của điểm depart là d = M 80 200,

Ṭoạ độ của  2 điểm tiếp theo là L 160 100, 320 250 . L nghĩa là line.

Z là dấu kết thúc, hay ngừng lại goị là dấu close path.

Tất cả những chữ d, M, L, Z gọi là commands phải có khi vẽ SVG path.

<path id="uphill" d="M 80 200,L 160 100,320 250 Z"

Path khởi hành từ toạ độ  80 200 rồi  tiến tới 2 toạ độ  160 100,320 250 theo đường thẳng L

3-CÁCH VẼ CON CÁ

</g>

//Viết code nầy để vẽ con cá

<path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150,

          C 175 150,185 160,180 170 z"

          stroke="red" stroke-width="2" fill="green"/>

<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>

</g>

Muốn cho con cá nằm trên các cạnh của hình tam giác thì phải viết

<g transform=" translate(-160,-160)"> có chứa tọa độ  x = - 160, y= - 160

Nếu thiếu chữ translate thì tọa độ sẽ tự động theo default  là  ZERO.

Vì vậy khi vẽ hình theo SVG phải luôn nhớ viết chữ transform = " translate(x,y) “

Khi vẽ con cá  thì cần phải dùng đường cong có ký hiệu C nghĩa là curve, đường thẳng có ký hiệu L và vòng tròn ( trong bài nầy vẽ con mắt tròn của cá có bán kinh  r=3 px ở tọa độ cx=260  cy=155 )

Đây là tọa độ của con cá chưa có con mắt tròn. Và chưa có cái đuôi đầ đủ.

path d="M 200 160,C250 200,350 120,200 160,

          L 200 160,180 170,

          L 200 160,175 150 z"

Path khởi hành từ tọa độ M 200 160.,theo đường cong tới 3 tọa độ C 250 200,350 120,200 160,

Rồi theo đường thẳng tới 7 tọa độ  L 200 160,180 170, L 200 160,175 150

Đây những tọa độ của cái đuôi cá. :  C 175 150,185 160,180 170

Muốn có đuôi đầy đủ thì viết tọa độ nầy vào.

4-LÀM CHO CON CÁ DI CHUYỂN TỰ ĐỘNG VÀ KHÔNG DỪNG LẠI.

  THÌ VIẾT CODES NHƯ SAU CHO MỘT VÒNG DI CHUYỂN MẤT 10 seconds.

<animateMotion dur="10" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#uphill"/>

</animateMotion>

Nhớ codes nầy phải viết trong <g>…</g> của con cá

CÁ CHƯA CÓ ĐUÔI VÀ MẮT  ĐẦY ĐỦ

CÁ CÓ ĐUÔI VÀ MẮT ĐẦY ĐỦ

                   QUÝ BẠN THẤY THÍCH VẼ NHƯ DZẬY HÔNG ?



*********************************************************************

CON CÁ DI CHUYỂN TRÊN MỘT VÒNG CONG PATH CURVE


                                   





<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%">
<g> //  Viết codes vẽ vòng cong
<path id="curve" stroke="black" fill="none" stroke-width="5"
d="M 110,150 C 300,80 400,300 450,100 500,-100 -90,220 110,150" />
</g>
<g transform="translate(-160,-160)">
// Viết codes nầy vẽ con cá
<path d="M 200 160,C250 200,350 120,200 160,
          L 200 160,180 170,
          L 200 160,175 150,
          C 175 150,185 160,180 170 z"
          stroke="red" stroke-width="2" fill="green"/>
<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>
<animateMotion dur="10" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#curve"/>
</animateMotion>
</g>
</svg>

CON CÁ DI CHUYỂN TRÊN PATH ELLIPSE.

1-HỌC CÁCH VẼ HÌNH ELLIPSE.

Đây là codes làm xuất hiên một hình ellipse .

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="100%" height="100%">

<g > 

 <ellipse cx ="300" cy="260" rx = "140" ry = "80"

 stroke="red" stroke-width="4" fill="none"/>

</g>

</svg>

Ghi chú hướng dẫn.

Toạ độ tâm của ellipse là cx ="300" cy="260"

Trục ngang và trục đứng của ellipse là rx = "140" ry = "80"

2-HỌC CÁCH VẼ PATH ELLIPSE.

Vẽ  path ellipse rất phức tạp. Con cá chỉ có thể di chuyển trên path ellipse  chứ không thể di chuyển trên hình ellipse.

Đây là codes vẽ  path ellipse khép kín.

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="100%" height="100%">

<g> // Vẽ ellipse

<path id = "ellipse" 

       d = " M 225,275

                a 100,50  0  1,1  0,0.0009 " Z

           stroke = "red"  stroke-width = "4"  fill = "none" />

</g>

</svg>

GHI CHÚ HƯỚNG DẪN .
Tọa độ khởi hành là d = " M 225,275, chính là tâm của đường goị la ellipse path .
Phân tách những con số trong :  a 100,50  0  1,1  0,0.0009
a là command of elliptical arc.
100,50 là trục ngang và trục đứng của ellipse.
0 là góc quay bắt buộc phải có của ellipse.Nếu thiếu thì hình không hiện ra.
1,1 : số 1 đầu tiên là của large arc- flag  cho biết ellipse sẽ lớn hơn 180 độ và số 1 tiếp theo là của sweep-flag cho biết ellipse sẽ quay theo chiều dương cùng với chiều kim đồng hồ.Hai con số nầy bắt buộc phải có.
Tại sao ? Lý do như sau để chỉ cho chúng ta biết góc quay của trục ellipse path.
* 1,0 ellipse sẽ lớn hơn 180 độ và quay theo chiều ngược kim đồng hồ.
* 1,1 ellipse sẽ lớn hơn 180 độ và quay theo chiều kim đồng hồ.
* 0,1 ellipse sẽ nhỏ hơn 180 độ và quay theo chiều kim đồng hồ
* 0,0 ellipse sẽ nhỏ hơn 180 độ và quay theo chiều ngược kim đồng hồ.
0,0.0009 : con số nầy cho biết ellipse sẽ khép kin.
0,0.009 : con số nầy cho biết ellipse bị hở chút xíu.
0,1 : con số nầy cho biết ellipse sẽ hở rất lớn.
 
KHI CHÚNG TA HIỂU TỚI ĐÂY RỒI THÌ THA HỒ VẼ PATH ELLIPSE TUỲ Ý MUỐN
Điều kiện muốn vẽ ellipse path phải có 7 parameters nhưng người viết chỉ nêu ra phần thực hành mà thôi để giúp quý bạn không bị lẫn lộn khi muốn vẽ được ngay.
 
3- RÁP CODES VẼ ELLIPSE PATH VÀO CHUNG VỚI CODES VẼ CÁ
 
 CON CÁ DI CHUYỂN TRÊN ELLISE PATH




<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%">
<g> //  Viết codes vẽ  path ellipse
<path id = "ellipse" 
           d = " M 225,275
                   a 180,100  0  1,1  0,0.0009 " Z
           stroke = "green"  stroke-width = "4"  fill = "none" />
</g>
 
<g transform="translate(-160,-160)">
// Viết codes  vẽ con cá
<path d="M 200 160,C250 200,350 120,200 160,
          L 200 160,180 170,
          L 200 160,175 150,
          C 175 150,185 160,180 170 z"
          stroke="red" stroke-width="2" fill="green"/>
<circle cx="260" cy="155" r="3" stroke="black" fill="blue"/>
<animateMotion dur="10" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#ellipse"/>
</animateMotion>
</g>
</svg>


Henry Dươngg

  
updated 17-4-2017
 PEACE ON EARTH

“Tâm giao tương ngộ có còn dài ?

Chuyện vãn tuổi già chớ trách  ai.

Có  lúc trí cùn tâm bối rối,

Đôi khi lời cạn dạ không hài.

Chín người mười ý làm sao tránh,

Mỗi cảnh mỗi tình khó đúng sai.

Biển rộng mênh mông khôn với được,

Thuyền chèo có hạn, dám so tài !

ĐoànThị Dưỡng/VN “