Hướng dẫn svg path html
Section 2. Basic Shapes and Paths
Hình khối cơ bảnSVG có sẵn các hình khối cơ bản mà ta chỉ cần lấy ra và sử dụng : hình chữ nhật, hình tròn, bầu dục, đường thẳng, đường gấp khúc, và đa giác. Mỗi phần tử đòi hỏi một tập các thuộc tính trước khi nó được vẽ ra, như tọa độ và chi tiết kích thước. Hình chữ nhậtPhần tử
Các thuộc tính width và height được thiết lập để xác định kích thước của hình chữ nhật, trong khi đó fill dùng để tô màu cho hình khối. Các giá trị số được mặc định là pixels và fill được mặc định là màu đen khi để trống. Các thuộc tính khác mà có thể được cho vào có tọa độ x và y. Những giá trị này sẽ di chuyển hình dạng dọc trục thích hợp theo các kích thước thiết lập bởi các phần tử Nó cũng có thể tạo ra các góc tròn bằng cách xác định các giá trị trong vòng bằng các thuộc tính rx và ry . Ví dụ, rx = "5" ry = "10" sẽ chỉnh bo góc hai bên theo chiều ngang của góc có bán kính 5px, và hai bên theo chiều dọc của các góc có bán kính 10px. Hình trònPhần tử
Các thuộc tính cx và cy dùng để thiết lập xác định vị trí của tâm vòng tròn trong không gian hiển thị được xác định bởi Thuộc tính r dùng để xác định bán kính ngoài của hình tròn Hình EllipseMột phần tử
Trong khi giá trị của cx và cy đang thiết lập tâm điểm và dựa vào khoảng cách điểm ảnh vào SVG trong không gian, giá trị rx và ry để xác định bán kính của các mặt của hình khối. LinePhần tử
Giá trị x1 và y1 cùng thiết lập tọa độ cho điểm bắt đầu của đường thẳng. Giá trị x2 và y2 cùng thiết lập tọa độ cho điểm kết thúc của đường thẳng. PolylinePhần tử
Các giá trị của các điểm thiết lập vị trí của hình trên trục x và y qua hình khối và được phân loại thành nhóm x, y qua danh sách các giá trị. Một số lẻ các điểm sẽ gây ra lỗi. PolygonPhần tử
Các điểm của hình đa giác được xác định thông qua một loạt 8 nhóm giá trị x, y. Phần tử này cũng có thể tạo ra các hình khép kín khác tùy thuộc vào số lượng các điểm được xác định. The path Elementđường dẫn SVG đại diện cho các phác thảo của một hình. Hình này có thể được filled, stroked, được sử dụng để điều hướng văn bản, và/hoặc sử dụng như một clipping path. Tùy thuộc vào hình mà path này có thể rất phức tạp, đặc biệt là khi có nhiều đường cong có liên quan. Khi đạt được một sự hiểu biết cơ bản về cách chúng làm việc và cú pháp, tuy nhiên, sẽ giúp làm cho các path đặc biệt dễ quản lý hơn. path dataCác dữ liệu của path được chứa trong thuộc tính d
của phần tử Dữ liệu ở trong thuộc tính d gồm moveto, line, curve, arc và closepath định nghĩa cho path.
The
movetoCác lệnh MoveTo (M hoặc m) thiết lập một điểm mới, như nhấc một cây bút và bắt đầu vẽ từ một vị trí mới trên giấy. Các dòng mã bao gồm các dữ liệu đường dẫn phải bắt đầu bằng một lệnh MoveTo, như trong ví dụ trên với lime. lệnh MoveTo khởi tạo một hình ảnh đại diện bắt đầu bởi 1 subpath, tạo ra một compound path. Một chữ hoa M ở đây chỉ ra tọa độ tuyệt đối, trong khi một m chữ thường chỉ ra tọa độ tương đối. closepathClosepath (Z hoặc z) kết thúc phần con hiện tại và kết quả là một đường thẳng được vẽ từ điểm khởi tạo. Nếu closepath được thêm vào ngay sau moveto, thì moveto tọa độ đại diện cho sự bắt đầu của subpath tiếp theo . Nếu closepath này cùng được theo sau bởi bất cứ điều gì khác hơn moveTo, subpath tiếp theo bắt đầu tại cùng một điểm là subpath hiện hành. Cả chữ z và Z đều cho kết quả giống nhau. linetoCác lệnh lineto vẽ đường thẳng từ điểm hiện tại đến một điểm mới . L, lL và l vẽ một đường từ điểm hiện tại với các tọa độ điểm tiếp theo . Điểm mới này sau đó trở thành điểm hiện tại , và tiếp tục như vậy. L sẽ tương ứng với vị trí tương đối và l sẽ tương ứng với vị trí tuyệt đối của hình vẽ. H, hCác lệnh H và h vẽ một đường ngang từ điểm hiện tại . H sẽ tương ứng với vị trí tương đối và h sẽ tương ứng với vị trí tuyệt đối của hình vẽ. V, vCác lệnh V và v vẽ một đường thẳng đứng từ điểm hiện tại . V sẽ tương ứng với vị trí tương đối và v sẽ tương ứng với vị trí tuyệt đối của hình vẽ. Curve CommandsCó ba nhóm các lệnh vẽ đường cong : Cubic Bézier ( C , C , S , s) , bậc Bézier (Q, q , T , t) , và cung Elliptical (A , a). Các phần đường cong sau đây sẽ giới thiệu các khái niệm cơ bản sau mỗi lệnh đường cong , xem chi tiết bản đồ, và sau đó cung cấp một biểu đồ để hiểu biết thêm. Cubic BézierCác lệnh Bézier Cubic C và c vẽ một đường cong từ điểm hiện tại sử dụng ( x1 , y1 ) các thông số như là một điểm xác định ở đầu của đường cong và ( x2, y2 ) là điểm xác định ở cuối, xác định các chi tiết hình dạng của các đường cong . S và s cũng vẽ một đường cong Bézier Cubic , nhưng trong trường hợp này có một giả định rằng các điểm xác định đầu tiên là một sự phản ánh của các điểm xác định thứ hai . Đoạn mã sau vẽ một đường cong Bézier Cubic cơ bản:
Thao tác với các bộ đầu tiên và cuối cùng của giá trị cho các đường cong này sẽ tác động bắt đầu và điểm kết thúc, trong khi thao tác hai giá trị trung tâm sẽ ảnh hưởng đến hình dạng và vị trí của các đường cong tự ở đầu và cuối . S và s lệnh cũng vẽ một đường cong Bézier Cubic , nhưng trong trường hợp này có một giả định rằng các điểm kiểm soát đầu tiên là một sự phản ánh của các điểm kiểm soát cuối cùng cho lệnh C trước. phản ánh này là tương đối so với điểm bắt đầu của lệnh S . Một tín hiệu C viết hoa mà vị trí tuyệt đối sẽ làm theo, trong khi một c chữ thường là tương đối. Logic này cũng áp dụng cho S và s . Quadratic Bézierđường cong Bézier bậc hai (Q, q , T , t) là tương tự như đường cong Bézier Cubic ngoại trừ việc họ chỉ có một điểm kiểm soát. Các mã sau vẽ một đường cong bậc hai Bézier cơ bản :
Thao tác với các bộ đầu tiên và cuối cùng của các giá trị, M20,50 và 100,50 , tác động các vị trí của điểm đầu và điểm kết thúc của đường cong. Các thiết lập trung tâm của các giá trị , Q40,5 , xác định các điểm kiểm soát đối với các đường cong , hình thành hình dạng của nó . Q và q vẽ đường cong từ điểm đầu đến điểm cuối sử dụng ( x1 , y1 ) như kiểm soát . T và t vẽ đường cong từ điểm đầu đến điểm cuối bằng cách giả sử rằng các điểm kiểm soát là một sự phản ánh của sự kiểm soát trên các lệnh được liệt kê trước đó tương ứng với điểm bắt đầu của T mới hoặc lệnh t Một tín hiệu Q hoa mà vị trí tuyệt đối sẽ làm theo, trong khi một q viết thường là tương đối. Logic này cũng áp dụng cho T và t . Một Elliptical Arc (A , a) định nghĩa một phân đoạn của một hình elip. Những phân đoạn được tạo ra thông qua một hoặc một lệnh mà tạo ra hồ quang bằng cách xác định điểm bắt đầu, điểm cuối , x và y bán kính, luân chuyển, và chỉ đạo. Dưới đây là một cái nhìn tại các mã cho một Elliptical Arc cơ bản :
Các bộ đầu tiên và cuối cùng của các giá trị trong con đường này, M65,10 và 50,25 đại diện cho toạ độ ban đầu và cuối cùng, trong khi tập thứ hai của các giá trị xác định hai bán kính . Các giá trị của 1,0 (lớn - arc - cờ và quét - flag) xác định cách hồ quang được rút ra, như có bốn tùy chọn khác nhau ở đây . Sơ đồ dưới đây cho thấy bốn tùy chọn arc và tác động lớn hồ quang cờ và quét - cờ giá trị có trên render của đoạn vòng cung . Embeds From Vector SoftwarePhần mềm đồ họa vector cho phép các thế hệ của nhiều hình dạng phức tạp và các đường dẫn trong khi sản xuất mã SVG có thể được thực hiện, sử dụng, và thao tác ở những nơi khác . Một khi đồ họa được hoàn tất, các mã XML tạo ra, mà có thể khá dài tùy thuộc vào sự phức tạp , có thể được sao chép và nhúng vào HTML. Phá bỏ từng phần của SVG và có các yếu tố tổ chức ngay tại chỗ rất có thể giúp trong điều hướng và hiểu các tài liệu này dường như phức tạp và dài dòng . Dưới đây là mã SVG cho một hình ảnh của một số anh đào với các lớp học thêm để tăng cường chuyển hướng:
Các thuộc tính trong phần tử svg xác định không gian làm việc , hoặc "canvas" cho đồ họa . Lá và thân cây trong vòng một Sau khi mã này được sao chép nó có thể được chạy qua một ưu SVG trước khi được đặt trong HTML , sẽ giúp loại bỏ mã không cần thiết và khoảng cách và lần lượt làm giảm đáng kể kích thước tập tin . SVG Optimizer hoặc SVGO Peter Collingridge của những công cụ mà rất hữu ích trong vấn đề này . Chương 1 Chương 3update Chương 4update Chương 5update Chương 6update Dịch từ : http://svgpocketguide.com/book |