SVG教程：笔画(stroke)属性及示例

以下是一些经常使用的stroke属性。

编号	Stroke类型	描述
1	`stroke`	定义元素的文本，线条或轮廓的颜色。
2	`stroke-width`	定义任何元素的文本，线条或轮廓的粗细。
3	`stroke-linecap`	定义不同类型的结束行或任何路径的轮廓。
4	`stroke-dasharray`	用于创建虚线。

示例

文件:testSVG.html -

<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网络浏览器中打开testSVG.html，应该看到以下结果 -

stroke width 属性

<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网络浏览器中打开testSVG.html，应该看到以下结果 -

stroke-linecap属性

<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网络浏览器中打开testSVG.html，应该看到以下结果 -

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

在Chrome网络浏览器中打开testSVG.html，应该看到以下结果 -