鍍金池/ 教程/ HTML/ SVG stroke屬性
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時(shí)鐘
SVG漸變
SVG <pattern>元素
SVG簡介
SVG徑向漸變
SVG <filter>元素
SVG對(duì)話框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標(biāo)
SVG拖動(dòng)
SVG模糊效果

SVG stroke屬性

SVG支持多個(gè)筆畫(stroke)屬性。

以下是一些經(jīng)常使用的stroke屬性。

編號(hào) Stroke類型 描述
1 stroke 定義元素的文本,線條或輪廓的顏色。
2 stroke-width 定義任何元素的文本,線條或輪廓的粗細(xì)。
3 stroke-linecap 定義不同類型的結(jié)束行或任何路徑的輪廓。
4 stroke-dasharray 用于創(chuàng)建虛線。

示例

文件: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網(wǎng)絡(luò)瀏覽器中打開testSVG.html,應(yīng)該看到以下結(jié)果 -

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網(wǎng)絡(luò)瀏覽器中打開testSVG.html,應(yīng)該看到以下結(jié)果 -

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網(wǎng)絡(luò)瀏覽器中打開testSVG.html,應(yīng)該看到以下結(jié)果 -

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網(wǎng)絡(luò)瀏覽器中打開testSVG.html,應(yīng)該看到以下結(jié)果 -


下一篇:SVG簡介