Using 'inline' SVG gradient on an element like <line> - HTML CSS SVG

HTML CSS examples for SVG:Line

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

Description

Using 'inline' SVG gradient on an element like <line>

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from w ww.j  a  v a 2s  .c  o  m-->
 <body> 
  <svg width="10cm" height="3cm" viewbox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
   <desc>
     test
   </desc> 
   <defs> 
    <rect id="MyRect" width="60" height="10" fill="#000" /> 
   </defs> 
   <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> 
   <use x="20" y="10" xlink:href="#MyRect" /> 
  </svg>  
 </body>
</html>

Related Tutorials