Align text inside SVG

Question

I have adobe illustrator. When I export graphic to svg, the text part looks like:

  <style type="text/css">
 .st6{fill:#FFFFFF;}
  </style>
 <text id="text2" transform="matrix(1 0 0 1 153.873 305.2743)" class="st6">Default text</text>

This text is aligned to center. Now I change text inside browser with javascript - so, replace "Default text" with "New text". This text is not aligned to center any more. If I change text, how can I achieve that it is always aligned to center? I have try with adding "text-align:center" to st6 class or adding this property to text element:

  text-anchor="middle"

but doesn't work. Any idea?

One interesting other example which I don't understand. Here is part of svg template I have:

 <g id="text_4">
<g>
    <defs>
        <rect id="SVGID_10_" x="9.96" y="273.53" width="170" height="15"/>
    </defs>
    <clipPath id="SVGID_11_">
        <use xlink:href="#SVGID_10_"  style="overflow:visible;"/>
    </clipPath>
    <g style="clip-path:url(#SVGID_11_);">
        <text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling </text>
    </g>
</g>

I can change text for example instead of "2013 Riesling" I can add "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" and text is still in the center.

Then I have removed all elements from this svg except text(so remove all g elements and clip path) only this left:

<text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling</text>

But template is still the same, nothing has changed if I view it inside browser. How is that possible? So, I can shorten size of SVG for 70%. And here text is always centered while in my template if I do the same it is not. Interesting.

Answer 1

Adobe Illustrator has positioned your text so that it is centered according to your design. But obviously that positioning is specific to that particular piece of text.

text-align: center will not work with SVGs. That is an HTML property.

text-anchor: middle is the correct property to use. It will cause the text to be centred on the coordinates you specify. So in order for the new text to be centered properly, you will have to adjust the x coordinate of your text element.

In your case the text is being positioned using a transform attribute. You could either adjust the transform, or replace it with x and y attributes.

So, for example, if the centre position for your text was calculated to be (200, 305.2743), you would need to change your text element to:

<style type="text/css">
  .st6 {fill:#FFFFFF; text-anchor:middle;}
</style>
<text id="text2" transform="matrix(1 0 0 1 200 305.2743)" class="st6">New text</text>

or

<style type="text/css">
  .st6 {fill:#FFFFFF; text-anchor:middle;}
</style>
<text id="text2" x="200" y="305.2743" class="st6">New text</text>

How you determine the centre position at run-time (in browser) is up to you.

One option is to use getComputedTextLength() or getBBox() on the text element. Then add half the width to your x coord.

Or alternatively you could alter your Illustrator file so that your placeholder text was something tiny like ".". Then you would probably be close enough to centre that you wouldn't need to adjust the coordinates.