下一个 → ← 上一个

SVG 描边

17 Mar 2025 | 阅读 2 分钟

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>

下一个主题SVG g 元素

← 上一个下一个 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。