Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình chữ nhật bằng rect, với chiều rộng 200px, chiều cao 100px: <svg width='300' height='200' style='background: cyan'> <rect width='200' height='100' /> </svg> Hình chữ nhật có mặc định màu đen ở góc trên bên trái, bắt đầu tại điểm tọa độ x = 0, y = 0. Mình sẽ...
HTML CSS frontend rectangle svg
Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình tròn bằng circle, với bán kính là 40px: <svg width='300' height='200' style='background: cyan'> <circle r='40' /> </svg> Hình tròn có mặc định màu đen ở góc trên bên trái và tâm đường tròn nằm tại điểm tọa độ x = 0, y = 0. Mình sẽ di chuyển hình vào vị trí...
HTML Web frontend svg circle
Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình ellipse với bán kính trục tung là 40px và bán kính trục hoành là 80px: <svg width='300' height='200' style='background: cyan'> <ellipse rx='80' ry='40' /> </svg> Hình ellipse có mặc định màu đen ở góc trên bên trái và tâm đường ellipse nằm tại điểm tọa độ x = 0,...
HTML Web frontend svg ellipse
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau: <svg width='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: <svg width='200' height='100' style='background: cyan'> <line x1='10' y1='5' x2='50' y2='25' stroke='orange' stroke-width='4'...
Animation Web frontend svg LINE
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình đa giác bằng thẻ polygon, với điểm bắt đầu tại điểm x = 65, y = 50 và đi đến các điểm còn lại: <svg width='200' height='200' style='background: cyan'> <polygon points='65,50 135,70 150,150 50,150'/> </svg> Cuối cùng, mình sẽ thêm một số thuộc tính màu...
HTML Web Polygon frontend svg
Khác SVG Polygon sẽ nối tất cả các điểm thành một vòng khép kín. SVG Polyline sẽ không nối điểm đầu và điểm cuối. Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: #B71C1C'></svg> Sau đó, mình sẽ vẽ các đoạn thẳng bằng thẻ polyline, với tọa độ bắt đầu là x=20, y=20, bằng cách tạo ra các điểm khác nhau trên hành trình. Lưu ý rằng x...
HTML Animation Web polyline svg
Đầ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...
HTML Web frontend svg star
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: #B71C1C'></svg> Sau đó, mình sẽ gõ nội dung hiện thị bên trong thẻ text, với tọa độ x = 50, y = 24 và kích cỡ chữ 24pt như bên dưới: <svg width='200' height='200' style='background: #B71C1C'> <text x='50' y='24' font-size='24pt'>I LOVE SVG</text> </svg> Mình sẽ xoay dòng chữ ở góc 45 độ và tùy chỉnh...
HTML Animation Web svg text
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width="200" height="200" style="background: #B71C1C"></svg> Sau đó, mình sẽ tạo các đường kẻ bằng thẻ path, lưu ý là M xuất hiện ở tọa độ điểm đầu tiên: <svg width="200" height="200" style="background: #B71C1C"> <path stroke='white' d='M20,20 180,20'/> <path stroke='white' stroke-width='2' d='M20,40 180,40'/> <path stroke='white' stroke-width='3'...
HTML Web frontend svg stroke
Trọng tâm của hướng dẫn này, mình sẽ đưa bạn để cách làm dễ nhất và có thể bắt tay vào làm ngay. Do đó, mình không cố để viết một bài chi tiết hay nặng về lý thuyết. Bạn có thể tìm hiểu sâu thêm từ internet. Trước khi đi vào bài viết, mình có để lại link bài viết về cách tạo SVG được sử dụng trong bài viết này. https://naututs.com/svg-ellipse/ Mình sử dụng Codepen để demo các...
HTML JavaScript CSS svg GSAP
Trọng tâm của hướng dẫn này, mình sẽ đưa bạn để cách làm dễ nhất và có thể bắt tay vào làm ngay. Do đó, mình không cố để viết một bài chi tiết hay nặng về lý thuyết. Bạn có thể tìm hiểu sâu thêm từ internet. Trước khi đi vào bài viết, mình có để lại link bài viết về cách tạo SVG được sử dụng trong bài viết này. https://naututs.com/svg-line/ Mình sử dụng Codepen để demo các...
HTML JavaScript CSS svg GSAP
Thẻ <use> có tác dụng gì? Thẻ <use> sẽ giúp chúng ta tái sử dụng nhiều lần một thẻ <svg>. Bên dưới là một ví dụ: hiển thị 3 hình tròn chỉ với một thẻ <svg>. <div class="hide"> <svg id="circle" width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="lightgreen" /> </svg> </div> <svg width="100" height="100"><use...
CSS svg change color SVG <use>