Страницы

Поиск по вопросам

вторник, 28 января 2020 г.

Как через CSS3 подключить svg

#css3 #svg 


Здравствуйте как подключить через CSS3 svg ?


Ответы

Ответ 1


Здравствуйте как подключить через CSS3 svg ?  


Вопрос  глобальный.
 SVG и CSS очень тесно взаимодействуют друг с другом.    

Стили CSS могут управлять элементами SVG, как из внешней таблицы
   стилей, так и могут быть размещены внутри файла *.svg




        
            
         


  




Для подключения внешней таблицы стилей для кроссбраузерного решения в
   шапку файла SVG добавляется ещё одна строка. 



При этом желательно чтобы файлы *.svg и *.css находились в одной папке.
 Браузер chrome особенно чувствителен к этому.
  Для добавления svg файла в html существует несколько способов -
   подробнее здесь Но если вы хотите использовать svg в полном
   объеме, то самый надежный метод для обеспечения интерактивности - это тег
   




 image format png





Браузер не понимающий SVG проигнорирует тег object и перейдет к следующему тегу img
и обработает его, как обычный HTML тег и выведет картинку.    

Ниже пример полного кода, показывающего интерактивность svg и управление через стили
css. Поочередно наведите курсор на силуэты мужчины и женщины.    






  animation marker
   	
		
    
    		   
		
			 
			 
		
    
     		
		
			
				
		
	
   
   
      
	       
    
	
	
	
      
        
	
	 
	  
       	 
	     
		  
		   
		    
			 
			  
	
	 
	   
    	
       	
	     
	        
			  
	   
       
   
	 the animation of the four markers 
	 	  
	  
       	 
	    
	 
	    
	   
	   
    
  
  Start"> 
	   
		
		
		
		 
	   	
        
	 
		 
		 
		 
		 
		 
	 
 	 
	 
		Stop 
			Start
 
	 	
	 
	 
    		   
		
			 
			 
		
    
     		
		
			
				
		
	
   
   
      
	       
    
	
	
	
      
        
	
	 
	  
       	 
	     
		  
		   
		    
			 
			  
	
	 
	   
    	
       	
	     
	        
			  
	   
       
   
	
	 	  
	  
       	 
	    
	 
	    
	   
	   
    
  
  Start"> 
	   
		
		
		
		 
	   	
        
	 
		 
		 
		 
		 
		 
	 
 	 
	 
		Stop 
			Start
 
	 	
	 
	 


Ответ 2


.logo {
/* Стили для наглядности */
  display: block;
  text-indent: -9999px;
  width: 300px;
  height: 200px; 
  
  background: url(http://s.cdpn.io/3/kiwi.svg); /* Подключение SVG */
  background-repeat: no-repeat;
  background-size: contain;
}





ресурс
перевод



Вот просто блок с одним лишь svg на фоне:



div {
  background: url(https://tatica.fedorapeople.org/Themes/F12/wallpaper-mosaico6.svg);
/* Подключение SVG */
  
}


   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima pariatur rem
recusandae porro itaque delectus esse voluptatibus, iusto consequuntur dolore?
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima pariatur rem
recusandae porro itaque delectus esse voluptatibus, iusto consequuntur dolore?
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima pariatur rem
recusandae porro itaque delectus esse voluptatibus, iusto consequuntur dolore?
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima pariatur rem
recusandae porro itaque delectus esse voluptatibus, iusto consequuntur dolore?
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima pariatur rem
recusandae porro itaque delectus esse voluptatibus, iusto consequuntur dolore?













Автор:



на






















Ярлыки:
,
,

















Комментариев нет:















Отправить комментарий

















        
      








Подписаться на:
Комментарии к сообщению (Atom)