Học SVG

Một số kiểu đường viền được tạo bởi SVG

Posted on by admin

Đầ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>

Một số kiểu đường viền được tạo bởi SVG 4

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' d='M20,60 180,60'/>
</svg>

Một số kiểu đường viền được tạo bởi SVG 5
Tiếp theo, mình sẽ tạo thêm một số kiểu đường kẻ khác nhau:

  • 3 dòng kẻ đầu: ở thuộc tính stroke-width (thay đổi độ dày của đường kẻ)
  • 3 dòng kẻ giữa: ở thuộc tính stroke-linecap (thay đổi kiểu kết thúc tại 2 đầu đường kẻ của đường kẻ)
  • 3 dòng kẻ cuối: ở thuộc tính stroke-dasharry (thay đổi kiểu đứt nét của đường kẻ)
<svg width="200" height="200" style="background: #B71C1C">
   <path stroke="white" d="M20,20 180,20"></path>
   <path stroke="white" stroke-width="2" d="M20,40 180,40"></path>
   <path stroke="white" stroke-width="3" d="M20,60 180,60"></path>
    
   <path stroke="white" stroke-width="8" stroke-linecap="butt" d="M20,80 180,80"></path>
   <path stroke="white" stroke-width="8" stroke-linecap="square" d="M20,100 180,100"></path>
   <path stroke="white" stroke-width="8" stroke-linecap="round" d="M20,120 180,120"></path>
    
   <path stroke="white" stroke-width="3" stroke-dasharray="5,5" d="M20,140 180,140"></path>
   <path stroke="white" stroke-width="3" stroke-dasharray="10,10" d="M20,160 180,160"></path>
   <path stroke="white" stroke-width="3" stroke-dasharray="20,10,5,5,5,10" d="M20,180 180,180"></path>
</svg>

Một số kiểu đường viền được tạo bởi SVG 6

Bây giờ, bạn có thể tạo ra nhiều kiểu đường kẻ bằng SVG thật dễ dàng!

Nguồn: www.naututs.com