SVG inside DIV - HTML CSS SVG

HTML CSS examples for SVG:svg element

  1. HOME
  2. HTML CSS
  3. SVG
  4. svg element

Description

SVG inside DIV

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">

body {<!--from   w ww. java  2  s . c  o  m-->
   background: darkgreen;
   margin: 0;
   padding: 0;
   color: #575142;
}
text {
   fill: url(#diagonal);
}
.demo1 {
   width:305px;
   height: 335px;
   display:block;
   background: #FFEE1F;
   font-size: 42px;
   text-align: center;
   font-weight: bold;
   color: darkgreen;
   overflow:hidden;
   position:relative;
   top: 50px;
   left: 50px;
   margin: 0;
   padding: 0;
}
.demo1 svg {
   display:block;
   margin: 0;
   padding: 0;
}


      </style> 
 </head> 
 <body> 
  <div class="demo1"> 
   <svg> 
    <defs> 
     <pattern id="diagonal" patternunits="userSpaceOnUse" width="840" height="960"> 
      <image xlink:href="https://www.java2s.com/style/demo/InternetExplorer.png" width="840" height="960" /> 
     </pattern> 
    </defs> 
    <text x="0" y="0" text-anchor="middle"> 
     <tspan x="50%" dy="1.2em">
       1st line1st line 
     </tspan> 
     <tspan x="50%" dy="1.2em">
       2nd line 
     </tspan> 
     <tspan x="50%" dy="1.2em">
       3rd line 
     </tspan> 
     <tspan x="50%" dy="2.8em">
       lastline 
     </tspan> 
    </text> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials