Style SVG with CSS

Question

I am using the Chartist plugin for generating charts. I've noticed that it does different element generations through browsers.

In Internet Explorer, it uses the <text> element, but it is offset on the left by 70px. I want to move that element on the right 70px, but I can't achieve this. I've tried with the text-anchor, transform, some letter and word spacing hacks, but none of them work.

Here is the code I am trying to modify:

<text class="ct-label ct-horizontal ct-end" x="25" y="205" width="179" height="20">FEB-2015</text>

So, instead of X-20, I want X-90.

Here is a live demo

Answer 1

Correct (but possibly slow) solution

This is a bug of the Chartist library. They are calculating their label position so it is not center-aligned to the category.

For the permanent solution, you need to take it up with them, so the bug is fixed on their side.

You can find author's contact details on this GitHub page.

Temporary solution

In the interim, you can apply a dirty fix by shifting the whole labels block to the right.

As IE11 ignores transform properties applied via CSS, we will need to apply it directly to the SVG node properties.

Since you have jQuery on your page, we'll use that for the simplicity sake:

<!--[if IE]>
<script>
$chart.on( 'created', function() {
  $( '.ct-labels' ).attr( 'transform', 'translate(70)' );
} );
</script>
<![endif]-->

Needless to say, this needs to go after your other chart code.

Answer 2

How about modifying x attribute via Javascript?

<![if !IE]>
<script>
document.getElementsByTagName("text")[0].setAttribute("x", 95);
</script>
<![endif]>

Answer 3

Text tag is child of svg g element. You can't change x/y position of g element but you can use transform="translate(x,y)":

<g transform="translate(70,0)" ... >
    <text class="ct-label ct-horizontal ct-end" x="25" y="205" width="179" height="20">FEB-2015</text>
    <text class="ct-label ct-horizontal ct-end" x="25" y="205" width="179" height="20">FEB-2015</text>
    ......
</g>

info on SVG G: http://tutorials.jenkov.com/svg/g-element.html

Answer 4

Add this to your style sheet:

text{
  position: relative;
  right: 0px;
  left: 50px;
}

It will remove your left transform and will move your <text></text> to right ( 50px )

Answer 5

 <!--[if IE]>
<script>
$chart.on( 'created', function() {
  $( '.ct-labels' ).attr( 'transform', 'translate(70)' );
} );
</script>
<![endif]-->