title: How to rotate SVG text with css
body: <p>I am using c3.js to produce a chart. the problem is that the I cannot change the position of text elements on xgrid. I would like them to be horizontal. But when ever I try to use rotate the elements go outside of svg. How can I place then exactly where they are but make them horizontal </p>
  
  <p>js fiddle: <a href="http://jsfiddle.net/yrzxj3x2/7/">http://jsfiddle.net/yrzxj3x2/7/</a></p>
  
  <p>here is the css that I have tried for complete code see js fiddle</p>
  
  <pre><code>.xLineLable text{
    font-size: 12px;
  }
  .c3-grid text {
      fill: #000;
      transform: rotate(0);
    }
  </code></pre>