- vừa được xem lúc

Hướng dẫn vẽ ngôi sao bằng SVG

#HTML
#Web
#frontend
#svg
#star

0 0 49

Người đăng: Tuan VO Thanh

Theo Viblo Asia

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau:

<svg width='300' height='200' style='background: #B71C1C'></svg>

Tiếp theo, mình sẽ tạo hình ngôi sao bằng thẻ polygon, tại điểm bắt đầu là x = 150, y = 30:

<svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165' stroke='#FFD600'/>
</svg>


<svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165 215,80' stroke='#FFD600'/>
</svg>


<svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165 215,80 85,80' stroke='#FFD600'/>
</svg>


<svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165 215,80 85,80 195,165' stroke='#FFD600'/>
</svg>

Cuối cùng, mình sẽ thay đổi màu nền của ngôi sao:

<svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165 215,80 85,80 195,165' fill='#FFD600'/>
</svg>

Bây giờ, bạn có thể tạo một hình ngôi sao bằng SVG thật dễ dàng!

Nguồn: www.naututs.com

Bình luận

Bài viết tương tự

- vừa được xem lúc

Một số quy tắc và name class phổ biến cho Front-end Dev

Trong CSS, các thủ tục setting đóng vai trò to lớn, nhưng bên cạnh đó, cách đặt tên theo các từ đơn sao cho phù hợp cũng quan trọng không kém . Đặt tên rất khó, nhưng cũng rất quan trọng .

0 0 93

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 57

- vừa được xem lúc

Tài nguyên nghiên cứu sâu Html

1. Articles and standards. . HTML 5.

0 0 198

- vừa được xem lúc

Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

Trending

Chúng ta thương thấy 3 method này và có thể dẫn dến bối rối và nhầm lẫn giữa chúng:. . Event.preventDefault().

0 0 52

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 74

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 49