1.13. SVG Stroke attribute

发布时间 ： 2025-10-25 13:33:30 UTC      

Page Views: 9 views

1.13.1. SVG Stroke attribute

SVG provides a wide range of stroke property. In this chapter, we will look at the following:

  • stroke

  • stroke-width

  • stroke-linecap

  • stroke-dasharray

All stroke attributes that can be applied to any kind of lines, text and elements are like the outline of a circle.

1.13.2. SVG stroke attribute

Stroke property defines a line, text, or element outline color:

Here is the SVG code:

Example 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="blue" d="M5 40 l215 0" /> <path stroke="black" d="M5 60 l215 0" /> g> svg>      
 
  1.13.3.    SVG   stroke-width   attribute  
 
   Tstroke-   width   property defines a line, text, or element outline thickness: 
 
 Here is the SVG code: 
 
 
 Example  
 
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> g> svg>      
 
  1.13.4.  SVG stroke-linecap attribute  
 
   strokelinecap   property defines the end of different types of open paths: 
 
 Here is the SVG code: 
 
 
 Example  
 
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> g> svg>      
 
  1.13.5.  SVG stroke-dasharray attribute  
 
   strokedasharray   property is used to create dashed lines: 
 
 Here is the SVG code: 
 
 
 Example  
 
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> g> svg>       
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            1.13. SVG Stroke attribute 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289