I have one SVG that is rotate around a svg but is not fixed

后端未结

关注

 1  1622


      
      
        
          1条回答        

        
                         				            
            
           
            
                              
                
              
              
                
                  春和景丽        
                
              
                            
                2021-01-26 06:46
              
            
            
                                                                       
Your idea is right yet both SVG images will adjust to the proportion of the available space (do you have only viewBox defined in them, removing the height and width attributes?). So the second image (pic2) will always "bounce" when resizing (but how many web users really do that?).
Maybe define styles for both SVGs in their DIV parent (or "container" element if you wish) by using vw and vh units - instead of pixels, possibly percentages as well - and this will at least give you more predictable result:
<style>
body {
    border: 0;
    margin: 0;      
}
.pic1 {
    position: absolute;
    width: 100%;
    border: 0;
    margin: 0;
    }
.pic1 img{/*Bg Photo*/
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}
.pic2{
    position: absolute;
    z-index: -1;
    transform: translate(2.5vw,88vh);
}
.pic2 img{
    transform-origin:center;
    width: 50px;
    height: 50px;
    animation: rotation 2s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
</style>
<body>
    <!--BG Photo-->
    <div class="pic1"><img src="1.svg"></div>
    <!--SVG that will rotate-->
    <div class="pic2"><img src="img/vec/gz4.svg" alt=""></div>
</body>

                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
                             
        
        
          
            
            
              
              
            
    


                                 
              
            
                          
    

        
         
                验证码
                
                  
                
                
                   看不清?
                
              
                                  
                    
   
                 
             
              提交回复