Một trong những điều thú vị nhất về đồ họa vector (ngoài tác dụng giãn kích thước mà không làm mất đi chất lượng) đó là khi bạn nắm rõ cơ bản, bạn có thể xử lý mã những cấu hình đơn giản, khá dễ dàng mà không cần thiết Show
Chỉ với vài dòng mã, bạn đã có thể có được những biểu tượng tùy biến cho riêng mình, và bạn sẽ biết chính xác từng biểu tượng được tạo ra như thế nào Trong hướng dẫn này, chúng tôi sẽ tìm hiểu tất cả các nguyên tắt cơ bản trong công việc viết mã SVG bằng tay, nhưng tôi sẽ không làm bạn phiền phức với một bài diễn thuyết khô khan chỉ giải thích những dình dạng và thuộc tính có liên quan . Thay vào đó, bạn sẽ học cách xử lý mã SVG bằng tay thông qua thực thi, tạo sáu biểu tượng mà bạn thấy ở phần đầu của bài viết này (vui lòng xem demo). Trong quá trình thực hiện, bạn sẽ sử dụng tất cả các thành phần cơ bản cần thiết cho việc viết mã SVG bằng tay Nói về những thành phần cơ bản đó, hãy xem một giới thiệu ngắn về mỗi thành phần Các thành phần SVG cơ bảnBạn có thể đối mặt với rất nhiều sự phức tạp với SVG, nhưng nó không nhất thiết phải chọn những biểu tượng mà chúng ta sẽ tạo ra. Danh sách liệt kê dưới đây là các khái niệm về các khối mà chúng ta sẽ cần
Khi chúng ta bắt đầu tạo biểu tượng, chúng ta sẽ làm việc với những thành phần này theo thứ tự đã thấy ở trên The file startedTrước khi chúng ta bắt đầu, hãy lấy về một bản sao các tập tin khởi động từ repo GitHub. You can download file. zip, or clone repo về hệ thống của mình Chúng ta sẽ bắt đầu với một tài liệu có sẵn một số thẻ HTML và CSS cơ bản. Điều này sẽ cho ta một số kiểu cho SVG mà chúng ta sẽ tạo ra, và đồng thời sẽ thiết lập một lưới nhỏ trên trang. Chúng ta sẽ tạo các biểu tượng bên trên lưới này và hy vọng nó sẽ giúp bạn sắp xếp một cách trực quan hơn so với khi tạo SVG When you open "handcodesvg. html" từ thư mục nguồn "Starter Files" bạn sẽ thấy những điều sau đây  Xác định nhanh các giá trị của 395 và 396Khi làm việc trong không gian 2D trên một trang web, trục ngang được diễn bởi 395 và trục dọc được diễn bởi 396. Vị trí theo từng thành phần này được biểu diễn bởi các con số. Nếu bạn muốn chuyển thứ gì đó về bên phải, chúng ta sẽ cần tăng giá trị 395 lên, và để chuyển về bên trái chúng ta sẽ giảm 395. Tương tự như vậy, để chuyển thứ gì đó xuống chúng ta sẽ tăng 396 và để chuyển lên trên chúng ta sẽ giảm 396 Một cách viết tắt thông tin ứng dụng để biểu diễn 395 và 396 của một điểm là stroke-width: 5;05. Ví dụ, một điểm tạo ra mức độ 395 là stroke-width: 5;07 và 396 là stroke-width: 5;09 có thể được viết như sau stroke-width: 5;10. Tôi sẽ sử dụng lối viết tắt xuyên suốt trong bài viết này Có để ý hai đường đậm nhất trên lưới của chúng ta không? . Như vậy, điểm giao nhau sẽ biểu diễn vị trí stroke-width: 5;11 và stroke-width: 5;12, hoặc stroke-width: 5;13 trong SVG của chúng ta Lưới nềnMỗi đường lưới dày nhất biểu diễn stroke-width: 5;14, và những đường lưới dày nhất biểu diễn stroke-width: 5;15. Vì vậy nếu chúng ta muốn chuyển một đối tượng xuống bên dưới từ một đường dày đến đường kế, chúng ta sẽ tăng vị trí của nó trên trụ 396 bằng stroke-width: 5;15 Nếu điều đó vẫn có vẻ chưa rõ lắm, đừng lo lắng điều này sẽ trở nên rõ ràng khi chúng ta bắt đầu thực hiện hành động tạo các biểu tượng SVG Style SVG DefaultLưu ý rằng trong tệp HTML khởi động có một số CSS với kiểu mặc định cho những biểu tượng SVG mà chúng ta sắp làm 1 svg { 2 stroke: #000; 3 stroke-width: 5; 4 stroke-linecap: round; 5 stroke-linejoin: round; svg {0 svg {1 svg {2 svg {3 Điều này sẽ thiết lập các biểu tượng của chúng ta thành không tô, và troke dày stroke-width: 5;18 màu đen với bo tròn là nắp và tham gia 1. Thiết lập SVGBước đầu tiên trong việc tạo bất kỳ SVG nào là xây dựng một thẻ phần tử stroke-width: 5;19. Bất kỳ điều gì bạn muốn SVG của bạn hiển thị sẽ phải nằm bên trong hai thẻ này. Có một số thuộc tính mà bạn có thể sử dụng trên phần tử này, nhưng chúng tôi sẽ duy trì mọi thứ đơn giản và chỉ sử dụng stroke-width: 5;20 và stroke-width: 5;21 Thêm mã sau đây vào phần stroke-width: 5;22 của tài liệu HTML 1 svg {5 2 3 svg {8 Lưu ý. CSS trong tệp bắt đầu sẽ chuyển SVG này xuống dưới và về bên phải stroke-width: 5;15 để góc trên bên trái của nó sẽ được đặt tại nơi giao nhau của hai đường tối đa trên nền lưới của chúng tôi. Và những người đánh giá bên trong bản demo trên CodePen xuyên suốt bài hướng dẫn này cũng có thể hơi khác-nhưng hãy thoải mái thoải mái với họ 2. Tạo biểu tượng "Canh Lê Trái"Hãy bắt đầu bằng cách sử dụng phần tử stroke-width: 5;24 để tạo biểu tượng canh lề trái này Phần tử dòng có bốn thuộc tính mà bạn cần phải sử dụng
Tóm lại, bạn sử dụng các thuộc tính stroke-width: 5;25 và stroke-width: 5;26 để thiết lập nơi mà dòng bắt đầu, và stroke-width: 5;27 và stroke-width: 5;28 để thiết lập nơi mà dòng kết thúc Please started the first line, the at on the same. Chúng ta sẽ tạo ra một dòng dài stroke-width: 5;33, tuy nhiên nét vẽ stroke-width: 5;18 mà chúng ta sẽ sử dụng sẽ thêm một số pixel phụ xung quanh bên ngoài dòng. Cũng như chúng ta sẽ cần chuyển dòng của chúng ta xuống dưới và về bên phải stroke-width: 5;35 để đảm bảo không có pixel dư ra do troke bị cắt ra Vì lý do đó, chúng ta sẽ bắt đầu dòng đầu tiên của chúng ta tại một vị trí stroke-width: 5;36 trên trục 395 và stroke-width: 5;36 trên trụ 396. Chúng ta có thể thiết lập điểm bắt đầu là stroke-width: 5;40 bằng cách sử dụng thuộc tính stroke-width: 5;41 Chúng ta muốn dòng dài stroke-width: 5;33, vì thế chúng ta sẽ thêm stroke-width: 5;43 vào vị trí 395 bắt đầu là stroke-width: 5;36, vì chúng ta stroke-width: 5;46 là giá trị mà chúng ta muốn thiết lập cho stroke-width: 5;27. Chúng ta muốn dòng hoàn tất tại cùng một vị trí trên trục ngang, vì thế chúng ta sẽ thiết lập stroke-width: 5;28 bằng stroke-width: 5;36, tương tự giá trị thiết lập cho stroke-width: 5;26. Chúng ta sẽ thêm điểm cuối stroke-width: 5;51 thông tin này qua thuộc tính stroke-width: 5;52 Mã hoàn chỉnh cho dòng đầu tiên sẽ như sau 1 20 Xem lại trên trình duyệt và bạn sẽ thấy một đường thẳng dài stroke-width: 5;33 màu đen với hai đầu bo tròn Bây giờ chúng ta có thể tiếp tục thêm ba dòng tiếp theo vào biểu tượng của chúng ta. Chúng ta muốn kết thúc với tổng cộng bốn dòng. Cái đầu và thứ ba sẽ dài stroke-width: 5;33, còn cái thứ hai và thứ tư sẽ là stroke-width: 5;55. Chúng ta cũng muốn có một khoảng cách giữa mỗi dòng là stroke-width: 5;56 Chúng ta có thể làm điều này với mã sau đây 1 20_______44_______ 24_______0_______ 26 4 28 Lưu ý. value 396 of each line gia tăng stroke-width: 5;56 để tạo ra khoảng cách cần thiết Vui lòng xem lại bản xem trước trên trình duyệt và bạn sẽ thấy tất cả các đường. Bạn cũng có thể chỉnh sửa trực tiếp SVG trong bút này Pause time convert Icon to CommentWith code that, the first icon of you has been complete. Chúng ta có sẵn để tạo biểu tượng tiếp theo, và chúng ta sẽ muốn tạo biểu tượng đó ở cùng một vị trí trên lưới, nhưng ngay bây giờ biểu tượng bên trái đang cản đường. Như vậy, bây giờ chỉ cần bình luận đoạn mã của nó để trải nghiệm lại không gian. Chúng ta sẽ quay trở lại và bỏ bình luận sau khi chúng ta chuyển biểu tượng của chúng ta thành những tài nguyên có thể sử dụng lại Bạn sẽ cần phải thực hiện tương tự cho từng biểu tượng khi chúng ta tiếp tục, hãy nhận xét nó khi bạn hoàn thành việc tạo ra nó. Vì lý do đó có lẽ cũng là một ý tưởng hay nếu thêm một chút chú thích bên trên mã cho mỗi biểu tượng để bạn biết cái nào là cái nào khi bạn quay lại chúng sau này 3. Tạo Biểu tượng "Dấu Lớn Hơn"Đối với biểu tượng này, hãy sử dụng sự biến đổi tiếp theo của phần tử stroke-width: 5;24. stroke-width: 5;60. Chúng ta sẽ sử dụng nó để tạo ra một dấu hiệu lớn hơn Phần tử stroke-width: 5;60 chỉ có một thuộc tính. stroke-width: 5;62. Trong phần này, bạn sử dụng các cặp số để thiết lập một chuỗi các điểm. Dòng sẽ tự động được vẽ giữa chúng. Các cặp số được viết đơn giản một số sau một số khác bên trong thuộc tính stroke-width: 5;62. Không yêu cầu dấu phẩy để phân cách, tuy nhiên nó vẫn có thể sử dụng dấu phẩy. Để dễ nhìn, bạn cũng có thể muốn đặt một cặp giá trị trên một dòng riêng của nó Chúng ta sẽ bắt đầu đa tuyến của chúng ta tại cùng một vị trí mà chúng ta bắt đầu biểu tượng trước đó, đó là stroke-width: 5;40 để đảm bảo nét và nắp không bị cắt. Chúng ta muốn điểm thứ hai di chuyển về bên phải và xuống dưới stroke-width: 5;65, vì thế chúng ta thiết lập nó thành stroke-width: 5;66. Điểm thứ ba của chúng ta sẽ được canh giữa thẳng đứng so với điểm đầu tiên, và di chuyển xuống dưới stroke-width: 5;65, vì vậy nó sẽ được thiết lập là stroke-width: 5;68 Chúng ta có thể thêm các điểm này vào các điểm thuộc tính của polyline như sau 1 stroke: #000;0_______44_______ stroke: #000;2 3 stroke: #000;4 445_______6 5 stroke: #000;8 Nếu bạn muốn rút ngắn mã hơn, bạn cũng có thể viết mã ở trên như sau 1 30 hoặc 1 32 Vui lòng xem lại sự duyệt của bạn và bạn sẽ thấy biểu tượng hiển thị tốt hơn. add an icon nữa đã được hoàn tất, đơn giản thôi Một lần nữa, hãy bình luận cho nó đi và cho nó một chú thích để bạn biết là cái nào trước khi tiến hành làm biểu tượng tiếp theo 4. Tạo biểu tượng "Trình duyệt"Bây giờ chúng ta đang làm việc với đường thẳng, hãy tạo một số định dạng, bắt đầu với một hình chữ nhật ( stroke-width: 5;69). Chúng ta sẽ sử dụng nó kết hợp với một số stroke-width: 5;24 để tạo một trình duyệt biểu tượng Hình chữ nhật và hình vuông có thể được tạo ra với phần tử stroke-width: 5;69, phần tử này có đặc tính mà bạn cần cung cấp
Lưu ý. bạn có thể sử dụng các thuộc tính stroke-width: 5;78 và stroke-width: 5;79 để tạo các góc bo tròn nếu bạn cũng thích Chúng ta sẽ tạo một hình chữ nhật với góc trên bên trái của nó dịch chuyển stroke-width: 5;35 theo cả hai hướng, một lần nữa hạn chế cắt giảm đột quỵ, vì vậy chúng ta sẽ sử dụng các thuộc tính stroke-width: 5;81. Chúng ta muốn nó rộng stroke-width: 5;82 cao stroke-width: 5;83, vì vậy chúng ta cũng sẽ sử dụng các thuộc tính stroke-width: 5;84 Như vậy mã đầy đủ cho cấu hình chữ nhật là 1 34 Lưu mã của bạn và xem lại trên trình duyệt. Bạn sẽ thấy một tin nhắn chữ nhật nhỏ nằm trên đó Bây giờ tất cả những gì chúng ta cần làm là thêm một đường thẳng nằm ngang ở bên trên, thêm một đường thẳng đứng gần với góc trên bên trái. Chúng ta sẽ sử dụng phương thức tạo đường thẳng tương tự như chúng ta đã làm, mã hoàn chỉnh cho biểu tượng trình duyệt sẽ là 1 34_______44_______ 38 3 stroke-width: 5;0 Dành một khoảng thời gian để xem mức độ được cung cấp trong thuộc tính của hai đường thẳng, và có thể thay đổi giá trị của chúng để bạn có thể thấy chúng hoạt động như thế nào trong biểu tượng này 5. Tạo biểu tượng "Cảnh báo"Bây giờ chúng ta đã tạo ra được hình chữ nhật, hãy thử sử dụng stroke-width: 5;85. Chúng ta sẽ sử dụng hai trong số chúng, cùng với một stroke-width: 5;24, để tạo biểu tượng cảnh báo này Tương tự như hình chữ nhật, phần tử stroke-width: 5;85 cũng yêu cầu bốn thuộc tính, tuy nhiên chúng hơi khác so với những thuộc tính của hình chữ nhật. Thay vì sử dụng chiều rộng và chiều cao, chúng ta thiết lập một bán kính ngang và dọc
Chúng ta muốn một hình tròn rộng stroke-width: 5;82 cao stroke-width: 5;82, nghĩa là chúng ta cần bán kính của nó là stroke-width: 5;98 trên cả hai trục. Chúng ta sẽ thiết lập nó là stroke-width: 5;99 Chúng ta muốn hình tròn nằm ngang bằng với những đường thẳng tối đa nhất trên hình của chúng ta. Giả sử hình tròn của chúng ta sẽ rộng và cao stroke-width: 5;82, thì cần đặt tâm điểm tại stroke-width: 5;98. Chúng ta cũng cần dịch chuyển stroke-width: 5;35 để tránh bị cắt xén, do đó tâm điểm của hình tròn sẽ là 403 trên cả hai trục. Chúng ta sẽ thiết lập điều này với các thuộc tính 404 Quay lại tất cả những thứ đó, chúng ta có mã này 1 stroke-width: 5;2 Xem lại trình duyệt và bạn sẽ thấy một hình tròn trên trang web Bây giờ chúng ta sẽ thêm một hình tròn thứ hai, để tạo dấu chấm ở phía dưới của dấu chấm than. Chúng ta sẽ tạo ra cái này theo cách tương tự, sự khác biệt duy nhất là chúng ta sẽ sử dụng một kiểu nội tuyến để thiết lập điền vào màu đen 1 stroke-width: 5;4 Sau cùng, chúng ta chỉ cần thêm một đường dẫn để tạo phần khác của dấu chấm hơn. Một lần nữa chúng ta sẽ sử dụng những kỹ thuật tương tự như với những đường thẳng khác mà chúng ta đã sử dụng cho đến lúc này, duy chỉ khác chúng ta sẽ sử dụng một kiểu nội tuyến để làm dày nét từ stroke-width: 5;18 lên 406 Hoàn chỉnh mã cho biểu tượng cảnh báo của chúng ta như sau 6. Tạo biểu tượng "Phát"Bây giờ chúng ta đã có hình chữ nhật và hình elip, chúng ta đã sẵn sàng sử dụng thành phần 407. Chúng ta đã thấy việc tạo ra bất kỳ hình dạng đa giác nào mà chúng ta muốn với phần tử này, từ hình lục giác cho đến hình sao. Tuy nhiên, chúng ta sẽ giữ mọi thứ đơn giản và tạo ra một giác quan. Chúng ta sẽ kết hợp nó với một stroke-width: 5;85 để tạo ra một trò chơi biểu tượng Phần tử 407 hoàn toàn giống với phần tử stroke-width: 5;60. Nó chỉ có một thuộc tính, stroke-width: 5;62, trong đó bạn sử dụng những cặp giá trị để thiết lập mỗi điểm tạo nên cái hình. Sự khác biết đó là khi một đa tuyến sẽ luôn luôn mở, thì một đa giác sẽ tự động đóng lại chính nó Bắt đầu bằng cách lấy một hình tròn mà đa giác của chúng ta sẽ nằm trong đó. Chúng ta sẽ sử dụng hình elip mà chúng ta đã tạo ra trong biểu tượng cảnh báo 1 stroke-width: 5;2 Bây giờ hãy tạo đa giác của chúng ta. Chúng ta sẽ đặt ba điểm và đường thẳng sẽ tự động được tạo ra giữa những điểm này để tạo ra một hình tam giác. Các điểm sẽ là (35,23), (60,43) và (35,63). Như vậy mã cho đa giác sẽ là 1 stroke-width: 5;8 Hoàn chỉnh code cho icon play là 7. Tạo biểu tượng "Tải xuống"Bây giờ chúng ta sẽ chuyển đến cái có thể là phức hợp tạo ra nhất, nhưng đồng thời là cái linh hoạt nhất trong việc tạo ra những SVG hình, và đó là phần tử 412. Việc tạo một đường dẫn khá giống với việc tạo một đa giác, nơi bạn tạo từng phần của định dạng hình. Tuy nhiên, với đường dẫn bạn trực tiếp tạo từng điểm và đường mà không có sự tự động, và bạn cũng có tùy chọn để tạo hình cung giữa các điểm thay vì chỉ có đường Một đường dẫn có thể được sử dụng để tạo ra bất cứ thứ gì, nhưng với sự phức tạp của nó, tốt hơn là bạn nên sử dụng một ứng dụng vector thiết bị kết nối thay vì viết mã bằng tay. Vì lý do đó, chúng tôi sẽ tập trung vào một bộ tính năng đường dẫn và sử dụng nó để tạo biểu tượng tải xuống này Về mặt kỹ thuật, bạn có thể tạo hình dạng ở trên một đa giác, nhưng việc sử dụng đường dẫn sẽ cho chúng ta biết cách phần tử đường dẫn hoạt động như thế nào Chúng ta sẽ chỉ sử dụng một thuộc tính của 412, và đó là 414. 414 viết tắt của "dữ liệu", và nó với nó bạn sẽ định nghĩa tất cả các điểm và đường của đường dẫn. Bên trong thuộc tính này, các điểm thiết lập duy nhất của một đường dẫn và tạo các dòng giữa chúng được cung cấp thông tin qua các ký tự đơn 416 hoặc 417, theo sau bởi một bộ cấp độ 395 và / hoặc 396 Có một số chỉ thị, nhưng để cho bạn dễ hình dụng khi làm việc với 412 chúng ta sẽ làm việc với một số cái mà có thể thực tế hơn khi viết mã bằng tay. We like after
Bạn nhất định phải xem ba cái chỉ thị này, (và biểu tượng mà chúng ta sẽ tạo ra với chúng), như một giới thiệu cơ bản nhất về phần tử 412. Để tận dụng nó, bạn sẽ cần phải tự làm quen với Viết code cho Icon DownloadĐể tải xuống biểu tượng mã này, tôi khuyên bạn trước tiên nên thêm vào đường dẫn phần tử trống 1 40_______44_______ 42 3 44 Từ đây, thêm từng chỉ thị một, lưu và xem lại quá trình hình được tạo của ta để bạn có thể thấy nó được tạo ra như thế nào. Tôi cũng khuyến nghị là đặt từng thị chỉ trên một dòng riêng của nó để dễ nhìn
Code for arrow name will look as after 1 40 2 48 3 stroke-linecap: round;0 449_______2 549_______4 svg {0 stroke-linecap: round;6 svg {2 stroke-linecap: round;8 stroke-linecap: round;9 50 51_______50_______2_______50_______3_______48_______4 Để tìm hiểu thêm về 412, hãy tham khảo một số bài viết ở bên dưới 8. Thêm Phần tử 386Chúng ta đã viết xong sáu biểu tượng, giờ chúng ta có thể sử dụng lại chúng sau này trong SVG Để làm điều này chúng ta sẽ bọc lại tất cả sáu icon, (hiện đang comment), những icon với tag 451 1 56 2 58 3 stroke-linejoin: round;0 Điều này nói cho hệ thống biết rằng tất cả các biểu tượng mà chúng tôi đã tạo ra mặc định là ẩn đi, để khi chúng tôi sử dụng chúng Bây giờ bạn đã có thể bỏ qua từng biểu tượng bình luận và chúng sẽ không được nhìn thấy trên trang 9. Tạo nhóm với 452Có hai cách để sử dụng biểu tượng của mình. by way transfer them to group, or to symbol. Chúng ta sẽ chuyển các biểu tượng phân nữa thành nhóm, và các phân nửa còn lại thành biểu tượng để chúng ta có thể cấu hình các dung lượng khác nhau To convert a in number icon of them ta to a group, thì tất cả những gì chúng ta phải làm đều được bọc bên trong thẻ 453. Để làm cho nhóm đó có thể sử dụng lại chúng ta cũng sẽ cần cho nó một ID duy nhất Ví dụ 1 stroke-linejoin: round;2 2 stroke-linejoin: round;4 3 20 444_______4 544_______6 svg {0 28 svg {2 svg {04 Từng biểu tượng trong nhóm đầu tiên với 453 và thêm các ID, như sau 1 stroke-linejoin: round;2 2 stroke-linejoin: round;4 3 20 4 24 5 26 svg {0 28 svg {2 svg {04 stroke-linecap: round;9 51 svg {21 53 svg {23 svg {24 stroke: #000;0 svg {26 stroke: #000;2 svg {28 stroke: #000;4 svg {30 stroke: #000;6 svg {32 stroke: #000;8 svg {34 svg {04 svg {36 svg {37 svg {38 svg {39 svg {40 svg {41 34 svg {43 38 svg {45 stroke-width: 5;0 svg {47 svg {04 10. Sử dụng nhóm với 455Bây giờ chúng ta có ba biểu tượng được định nghĩa là các nhóm bên trong phần tử 386, như vậy chúng ta đã sẵn sàng để sử dụng chúng trong SVG của chúng ta. Để làm điều này, tất cả những gì chúng ta phải làm là thêm một phần tử 455, (đảm bảo là bổ sung nó sau và bên ngoài phần tử 386), và thiết lập một thuộc tính 459 đến ID của biểu tượng cần thiết Ví dụ, để sử dụng biểu tượng canh trái thêm mã sau 1 svg {50 Để đặt biểu tượng ở một vị trí công cụ có thể bổ sung thuộc tính 395 và 396 1 svg {52 Code to add all ba icon and distance them will like after 1 svg {52_______44_______ 3 svg {57 4 5 svg {60 Kiểm tra trình duyệt và bạn sẽ thấy tất cả ba biểu tượng đầu tiên của bạn 11. Create Symbol with 462Thay vì sử dụng nhóm để định nghĩa các biểu tượng, bạn cũng có thể sử dụng biểu tượng. Symbol hoàn toàn giống với nhóm, tuy nhiên bạn được truy xuất các thiết lập bổ sung để điều khiển hộp xem và Tỷ lệ Điều này có thể rất hữu ích nếu bạn muốn làm những thứ như canh giữa biểu tượng mà chúng ta đã tạo. Chúng ta sẽ chuyển ba biểu tượng còn lại thành biểu tượng, sau đó tinh chỉnh chúng để lấp đầy khoảng không cao stroke-width: 5;15, và canh giữa theo chiều ngang trong không gian đó Chúng ta tạo biểu tượng theo cùng một cách với nhóm, chỉ là chúng ta sẽ nhóm từng mã cho từng biểu tượng trong thẻ 464. Chúng ta sẽ cần thêm một ID duy nhất vào từng biểu tượng Tuy nhiên, những gì chúng ta cũng sẽ làm là thêm một thuộc tính viewBox. Thuộc tính này sẽ cho phép chúng ta định nghĩa các phần sẽ được hiển thị trên mỗi biểu tượng. Khi trình duyệt truy cập đến thông tin này, nó có thể thư giãn và biểu tượng canh một cách chính xác Chúng ta sẽ cần phải có các thuộc tính 465 của chúng ta bốn giá trị. Hai cái đầu tiên sẽ định nghĩa các điểm phía bên trái của biểu tượng, và cái thứ ba và thứ tư định nghĩa chiều rộng và chiều cao tương ứng của nó Bắt đầu với biểu tượng "cảnh báo", chiều rộng và cao của nó đều là 466 vì thế chúng ta sẽ thiết lập 465 của nó là 468 như sau 1 svg {62_______44_______ svg {64_______0_______29_______2 429_______4 543_______70 svg {0 svg {72 Biểu tượng "play" cũng rộng và cao 466, còn biểu tượng "download" rộng là 470 cao 471. Mã tương ứng cho các ký hiệu sẽ như sau 1 svg {62 2 svg {64 3 stroke-width: 5;2 4 stroke-width: 5;4 5 svg {70 svg {0 svg {72 svg {2 stroke-linecap: round;9 svg {87 51 svg {89 53 stroke-width: 5;2 svg {24 stroke-width: 5;8 svg {26 svg {04 svg {28 svg {30 svg {98 svg {32 200 svg {34 40 svg {36 48 svg {37 stroke-linecap: round;0 svg {39 stroke-linecap: round;2 svg {41 stroke-linecap: round;4 svg {43 stroke-linecap: round;6 svg {45 stroke-linecap: round;8 svg {47 50 217 52 219 44 221 svg {72 12. Use Symbol with 455Bây giờ chúng ta có thể sử dụng các ký hiệu của chúng ta theo cách tương tự như chúng ta đã làm với nhóm. Tuy nhiên, chúng ta cũng sẽ cung cấp cho mỗi chiều rộng và chiều cao là 473 1 224_______44_______ 3 227 4 5 230 Bạn sẽ thấy mỗi biểu tượng điền và canh trong khoảng thời gian stroke-width: 5;15 nhân stroke-width: 5;15 của nó Cố gắng áp dụng các thuộc tính stroke-width: 5;20 và stroke-width: 5;21 vào phần tử 455 của một trong những nhóm của bạn. Bạn sẽ thấy rằng không có gì thay đổi. Điều này là do trình duyệt dựa trên các giá trị của 465, (cái mà một nhóm không có), để biết cách giãn biểu tượng tóm tắtMã hoàn chỉnh sẽ như sau 1 232 2 234 3 236 4 238 5 240 svg {0 242 svg {2 244 stroke-linecap: round;9 246 51 248 53 250 svg {24 252 svg {26 254 svg {28 256 svg {30 258 svg {32 260 svg {34 262 svg {36 256 svg {37 266 svg {39 268 svg {41 270 svg {43 272 svg {45 274 svg {47 276 217 278 219 280 221 256 283________4 Điều đó đã mô tả những điều cơ bản về viết mã SVG bằng tay. Hãy tổng hợp lại những gì chúng ta đã học được
Chúng ta đã nghiên cứu một số kiến thức cơ bản trong hướng dẫn này, nhưng có rất nhiều thứ mà bạn có thể làm với SVG vì vậy đừng dừng lại ở đây, hãy tiếp tục khám phá thêm những điều thú vị mà bạn có thể làm được. |
