SVG - Đột quỵ

SVG hỗ trợ nhiều thuộc tính đột quỵ.

Sau đây là các thuộc tính chính của nét vẽ được sử dụng.

Sr.No.	Loại đột quỵ & Mô tả
1	stroke - xác định màu của văn bản, dòng hoặc đường viền của bất kỳ phần tử nào.
2	stroke-width - xác định độ dày của văn bản, dòng hoặc đường viền của bất kỳ phần tử nào.
3	stroke-linecap - xác định các kiểu kết thúc khác nhau của một dòng hoặc phác thảo của bất kỳ đường dẫn nào.
4	stroke-dasharray - dùng để tạo đường đứt nét.

Thí dụ

testSVG.htm

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

Đầu ra

Mở textSVG.htm trong trình duyệt web Chrome. Bạn có thể sử dụng Chrome / Firefox / Opera để xem trực tiếp hình ảnh SVG mà không cần bất kỳ plugin nào. Internet Explorer 9 trở lên cũng hỗ trợ kết xuất hình ảnh SVG.

Chiều rộng đột quỵ

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

Đầu ra

nét vẽ

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Đầu ra

đột quỵ-dasharray

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Đầu ra