SVG custom CSS styles for the <use> element in different context - HTML CSS SVG

HTML CSS examples for SVG:Text

  1. HOME
  2. HTML CSS
  3. SVG
  4. Text

Description

SVG custom CSS styles for the <use> element in different context

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.column-1 use {<!--  w w  w  . j  a  v a2s . c  o  m-->
   fill: red;
   color: blue; }
   .column-2 use {
      fill: green;
      color: orange; }


      </style> 
 </head> 
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg"> 
   <symbol id="icon-usp_return"> 
    <path class="cls-1" d="M2.9 3.11a.5.5 0 0 1-.481-.34 13.368 13.368 0 0 1-.708-4.27.5.507 0 0 1 1.014 0 12.322 12.322 0 0 0 .657 3.95.5.5 0 0 1-.322.63.453.453 0 0 1-.16.03zm6.416 7.43a.49.49 0 0 1-.233-.06 14.029 14.029 0 0 1-3.361-2.43.5.5 0 0 1 .717-.71 12.6 12.6 0 0 0 3.112 2.25.5.5 0 0 1 .215.68.51.51 0 0 1-.45.27zm6.087 1.46a.5.5 0 1 1 0-1 12.855 12.855 0 0 0 4.009-.65.51.51 0 0 1 .641.32.5.5 0 0 1-.322.63 13.986 13.986 0 0 1-4.328.7zm9.324-3.81a.538.538 0 0 1-.359-.14.5.5 0 0 1 0-.71 12.6 12.6 0 0 0 2.285-3.07.5.5 0 0 1 .685-.21.494.494 0 0 1 .2.67 13.552 13.552 0 0 1-2.467 3.32.5.5 0 0 1-.358.14z" transform="translate(-268.781 -3255)" /> 
    <path class="cls-2" fill="currentColor" d="M295.491 3268.98a.5.5 0 0 1-.5-.5A12.52 12.52 0 0 0 282.46 3256a12.713 12.713 0 0 0-11.47 7.39.5.5 0 0 1-.662.25.489.489 0 0 1-.254-.65 13.718 13.718 0 0 1 12.386-7.98 13.514 13.514 0 0 1 13.532 13.47.5.5 0 0 1-.501.5zm-24.959-5.29a.515.515 0 0 1-.5-.44l-1-7.68a.5.5 0 0 1 .993-.13l.939 7.19 7.22-.93a.493.493 0 0 1 .562.43.5.5 0 0 1-.432.56l-7.719.99a.143.143 0 0 1-.063.01z" transform="translate(-268.781 -3255)" /> 
   </symbol> 
  </svg> 
  <div class="wrap"> 
   <div class="column-1"> 
    <svg> 
     <use xlink:href="#icon-usp_return"></use> 
    </svg> 
   </div> 
   <div class="column-2"> 
    <svg> 
     <use xlink:href="#icon-usp_return"></use> 
    </svg> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials