SVG stroke笔画介绍和用法详解

本文概述

SVG支持多种笔划属性。这些如下:

stroke

它用于定义任何元素的文本, 线条或轮廓的颜色。

例子

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

立即测试

stroke-width

它用于定义任何元素的文本, 线条或轮廓的粗细。

例子

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

立即测试

stroke-linecap

它用于定义线的结尾或任何路径的轮廓的不同类型。

例子

<!DOCTYPE html>
<html>
   <title>SVG Stroke Example</title>
   <body>
      
      <h1>SVG Stroke</h1>
      
      <svg width="900" height="900">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="square" stroke-width="7" 
            stroke="blue" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="7" 
            stroke="orange" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="butt" stroke-width="7"
            stroke="red" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

立即测试

stroke-dasharray

它用于创建虚线。

例子

<!DOCTYPE html>
<html>
   <title>SVG Stroke Example</title>
   <body>
   
      <h1>SVG Stroke</h1>
      
      <svg width="900" height="900">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5, 5" stroke-width="6" 
            stroke="blue" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10, 10" stroke-width="6" 
            stroke="orange" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20, 10, 5, 5, 5, 10" stroke-width="6" 
            stroke="red" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

立即测试

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?