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.

Wallford

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.

Ashy

Thank you Paul.Your answer is great :) What do you mean with : so that your placeholder text was something tiny like "." – Wallford

I have add some addition to my answer. – Wallford

If you have control over the content of your starting SVG files, then if you use placeholder text that is very narrow (like "."), then you wouldn't need to adjust your text position when you add the text-anchor="middle". That is what I meant. – Ashy

Your additional question should really have been asked in a separate question. However the reason it had no effect when you removed the extra elements, is because they weren't actually doing anything that had a visible effect on the final SVG. Adobe Illustrator adds a lot of extra clip-paths to the SVGs it generates. I'm not sure exactly why. Perhaps it is to account for slight differences in the way AI renders some types of objects. – Ashy

Paul, how would you deal with that if dynamically added text is greater than placeholder? Otherwise you answered me everything, thanks again :) – Wallford

I'm not sure what you mean. Ask a new question and include a sample SVG. – Ashy

So, then a new question for the Graphic Design Stack Exchange site: how to make Illustrator export centered text with text-anchor: middle...? I'm afraid it is not possible. – Hooghly

Answer 2

Elaborate comment containing workaround:

As has been pointed out in the accepted answer, Illustrator (2017.1.0 release) doesn't export the text-anchor=middle tag in it's SVG's. Which is a pity if you want to use the SVG with dynamically generated and centered text.

I found the following work-around.

Step 1: create your design in AI with the text centered and the text-frame in the exact right location

Step 2: when you're done drawing and before exporting it to SVG: RIGHT-align the text:

Step 3: Manually (or dynamically) add the text-anchor=middle attribute to the text-frame.

<text text-anchor="middle">9650</text>

Step 4: Admire the result

Hooghly

@sanchez Did you try it yourself? Please, have a look at the screenshots. The positioning is not just ‘lucky‘: if you look at the picture under 'step 2' of my answer, you can tell that the left edge of the text box is now in the middle. The left edge aligns with what used to be the center/middle of the box. You can also tell by looking at the purple square under the text. That purple square is is where the text-box is positioned. Consquently so, by AI. It just forgets to export it, so we have to work around it. – Hooghly