css - Align text inside SVG -


i have adobe illustrator. when export graphic svg, 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 aligned center. change text inside browser javascript - so, replace "default text" "new text". text not aligned center more. if change text, how can achieve aligned center? have try adding "text-align:center" st6 class or adding property text element:

  text-anchor="middle" 

but doesn't work. idea?

one interesting other example don't understand. here part of svg template 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 example instead of "2013 riesling" can add "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" , text still in center.

then have removed elements svg except text(so remove g elements , clip path) 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 still same, nothing has changed if view inside browser. how possible? so, can shorten size of svg 70%. , here text centered while in template if same not. interesting.

adobe illustrator has positioned text centered according design. positioning specific particular piece of text.

text-align: center not work svgs. html property.

text-anchor: middle correct property use. cause text centred on coordinates specify. in order new text centered properly, have adjust x coordinate of text element.

in case text being positioned using transform attribute. either adjust transform, or replace x , y attributes.

so, example, if centre position text calculated (200, 305.2743), need change 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 determine centre position @ run-time (in browser) you.

one option use getcomputedtextlength() or getbbox() on text element. add half width x coord.

or alternatively alter illustrator file placeholder text tiny ".". close enough centre wouldn't need adjust coordinates.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -