如何使用 SVG 创建自定义形状按钮？

要设计 HTML 按钮的形状，我们可以使用 SVG 元素（可缩放矢量图形）。它基本上定义了 XML 格式的基于矢量的图形。 SVG 文件中的每个元素和每个属性都可以设置动画。我们可以使用 SVG 创建任何自定义形状的二维图形。

示例 1：此示例使用 SVG 创建圆形按钮。

 
 
       
 
     

   

    
GeeksforGeeks
           
    
Circle Shape Button
       
    

   

输出：

SVG 元素中有更多可用的形状，例如框、文本、矩形等。

示例 2：此示例使用 SVG 创建一个矩形形状的按钮。

 
 
       
 
     

   

    
GeeksforGeeks
           
    
Rectangle Shape Button
       
    

   

输出：

示例 3：此示例使用 SVG 创建一个星形按钮。

 
 
      
 
     

  

    
GeeksforGeeks
          
    
Star Shape Button
      
    
        
    

  

输出：

示例 4：此示例使用 SVG 创建标志形状按钮。

 
 
      
 
     

  

    
GeeksforGeeks
          
    
Flag Shape Button
      
    

  

输出：