CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Amar Syla
Amar Syla

Reputation: 3643

Style SVG with CSS

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

Upvotes: 2

Views: 585

Answers (5)

Chintan Barot
Chintan Barot

Reputation: 1

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

Upvotes: 0

Majid Nayyeri
Majid Nayyeri

Reputation: 444

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 )

Upvotes: 0

martynasma
martynasma

Reputation: 8595

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.

Upvotes: 4

Igor Vujovic
Igor Vujovic

Reputation: 419

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

Upvotes: 0

Zoran P.
Zoran P.

Reputation: 880

How about modifying x attribute via Javascript?

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

Upvotes: 0

Related Questions