Set SVG font-size - HTML CSS SVG

HTML CSS examples for SVG:Font

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

Description

Set SVG font-size

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!-- w  w  w  .j  a  v  a2  s  .  com-->
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseprofile="full" height="297" version="1.1" viewbox="0 0 210 297" width="210"> 
   <defs /> 
   <g id="kbgroup" transform="translate(10,10)"> 
    <g id="Q" transform="translate(0,0)"> 
     <rect fill="black" height="15.0" id="box-Q" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0" /> 
     <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">
       test
     </text> 
    </g> 
    <g id="W" transform="translate(19,0)"> 
     <rect fill="black" height="15.0" id="box-W" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0" /> 
     <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">
       Test
     </text> 
    </g> 
    <g id="E" transform="translate(38,0)"> 
     <rect fill="black" height="15.0" id="box-E" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0" /> 
     <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">
       Test
     </text> 
    </g> 
    <g id="R" transform="translate(57,0)"> 
     <rect fill="black" height="15.0" id="box-R" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0" /> 
     <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">
       test
     </text> 
    </g> 
    <g id="T" transform="translate(76,0)"> 
     <rect fill="black" height="15.0" id="box-T" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0" /> 
     <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">
       test
     </text> 
    </g> 
    <g id="Y" transform="translate(95,0)"> 
     <rect fill="black" height="15.0" id="box-Y" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0" /> 
     <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">
       test
     </text> 
    </g> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials