SVG - 描邊

SVG 支援多個描邊屬性。

以下是使用的主要描邊屬性。

序號	描邊型別及描述
1	stroke − 定義文字、線條或任何元素輪廓的顏色。
2	stroke-width − 定義文字、線條或任何元素輪廓的粗細。
3	stroke-linecap − 定義線條或任何路徑輪廓末端的不同型別。
4	stroke-dasharray − 用於建立虛線。

示例

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>

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

描邊寬度

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

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

描邊端點

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

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

描邊虛線

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

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

列印頁面