How to align a group (instead of text) along a path in svg?

前端 未结 3 759
半阙折子戏
半阙折子戏 2021-01-07 10:06

Lets assume I have programmatically created a circle and some text, that I want to align along the circle. I am able to do so usin

3条回答
  •  小鲜肉
    小鲜肉 (楼主)
    2021-01-07 11:13

    As @Paul LeBeau commented:

    No there is no automatic way to do that. You have to position it yourself

    Consider adding svg images to text using absolute positioning

    Since any text in SVG is a vector object, it has absolute coordinates x, y, as the first character of the word and the last.

    Using this you can position an icon or any other vector image to the beginning or end of the text.

    I put the icon in the tag and position it at the end of the word using the tag

    
    
    
        
        
        
        
        
    
    
      
    
    
      
         Hello Wordl  
      
     
      
              
       

    An example with a growing line on which text and an icon are located

    
    
      
        
    
    
    
    
    
      
      
       
      
       
      
         Stock growth in the first half of the year 
      
    

    One more example

    
     
      
    
    
    
     
       
     
      
      
      
      
        Decrease in stocks per year  
      
     
    

提交回复
热议问题