Draw text in SVG but remove background

前端 未结 2 1125
有刺的猬
有刺的猬 2020-12-10 17:01

I\'m working with an SVG element that should look something like this: (sorry that I have to post this as a link instead of as a picture, but as a new user I didn\'t have pe

2条回答
  •  Happy的楠姐
    2020-12-10 17:28

    "Removing the background" of svg text without scripting can be done using svg filters.

    For example:

    
       
       
    
    

    Which can be used by the text like this:

    
    

    This will adapt to the string width automatically. If you need some padding you can tweak the x,y,width,height attributes on the filter element.

    Hmm, thinking of this again, this might not be what you wanted exactly. But it's possible to adapt the above. Here's your file with this solution:

    
        
            
            THIS IS MY HEADER
            MY TEXT HERE
            
                
            
    
            
                
                
                
                
                
            
        
    
              
        
        
        
    
                        
        
        
    
        This text goes into the border
    
    

提交回复
热议问题