Clever Geek Handbook

Style SVG with CSS

I am using the Chartist plugin to create charts. I noticed that it makes different generations of elements across browsers.

Internet Explorer uses an element <text>

but is offset to the left by 70 pixels. I want to move this element to the right 70px, but I can't seem to get it. I tried to use text-anchor

, transform

some hacks for words and words, but none of them does not work.

Here is the code I'm trying to change:

<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

+3


source to share


5 answers


Correct (but possibly slow) solution

This is a bug in the Chartist library. They calculate their label position, so it is not centered with the category.

For a permanent solution, you need to take it with you, so the bug is fixed on their part.

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

Temporary solution



In the meantime, you can apply a dirty fix by sliding the block of entire shortcuts to the right.

Since IE11 ignores transform

CSS properties , we'll need to apply it directly to the SVG node properties.

Since you have jQuery in your page, we'll use this for simplicity:

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

Needless to say, this is necessary in order to use a different diagram code afterwards .

+4


source


How can I change the x attribute via Javascript?



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


source


The text tag is a child of svg g. You cannot change the x / y position of the 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

0


source


Add this to your stylesheet:

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

It will remove your left transform and move yours <text></text>

to the right (50px)

0


source 


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


source






More articles:


All Articles