Làm quen với thẻ Line trong SVG

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau: <svgwidth='200'height='100'style='background: cyan'></svg> Sau đó, mình sẽ vẽ các đoạn thẳng bằng thẻ <line/>, với điểm kết thúc của đoạn thẳng trước là điểm bắt đầu của đoạn thẳng tiếp theo: <svgwidth='200'height='100'style='background: cyan'><linex1='10'y1='5'x2='50'y2='25'stroke='orange'stroke-width='4'stroke-linecap='round'/><linex1='50'y1='25'x2='100'y2='25'stroke='orange'stroke-width='4'stroke-linecap='round'/><linex1='100'y1='25'x2='150'y2='75'stroke='orange'stroke-width='4'stroke-linecap='round'/><linex1='150'y1='75'x2='190'y2='75'stroke='orange'stroke-width='4'stroke-linecap='round'/></svg> Bây giờ, bạn có thể vẽ các đường kẻ gấp


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

<svgwidth='200'height='100'style='background: cyan'></svg>

Sau đó, mình sẽ vẽ các đoạn thẳng bằng thẻ <line/>, với điểm kết thúc của đoạn thẳng trước là điểm bắt đầu của đoạn thẳng tiếp theo:

<svgwidth='200'height='100'style='background: cyan'><linex1='10'y1='5'x2='50'y2='25'stroke='orange'stroke-width='4'stroke-linecap='round'/><linex1='50'y1='25'x2='100'y2='25'stroke='orange'stroke-width='4'stroke-linecap='round'/><linex1='100'y1='25'x2='150'y2='75'stroke='orange'stroke-width='4'stroke-linecap='round'/><linex1='150'y1='75'x2='190'y2='75'stroke='orange'stroke-width='4'stroke-linecap='round'/></svg>

Bây giờ, bạn có thể vẽ các đường kẻ gấp khúc bằng SVG thật dễ dàng!

Lưu ý khi dùng thẻ line là ta cần gắn thuộc tính stroke để chúng có thể hiện thị ngay.

Nguồn: www.naututs.com

Nguồn: viblo.asia

Bài viết liên quan

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th

Những ngành nghề AI có thể thay thế dần trong tương lai.

Những ngành nghề AI có thể thay thế trong tương lai gần Dựa trên các báo cáo và

Tạo Subdomain miễn phí với is-a.dev 🤪

Cuối tuần mọi người thế nào, mình thì rảnh quá lướt Facebook, tớ tình cờ th

Dùng TailwindCSS v4 trong SpringBoot + JTE

Giới thiệu JTE là gì? JTE (Java Template Engine) là một template engine an toàn, nhẹ và