Place text within SVG in alignment

There seems to be an issue with aligning text in Adobe Illustrator when exporting graphics to SVG. When the text is initially exported, it is aligned to the center, but if you change the text using JavaScript from "Default text" to "New text", the alignment is lost.

I have tried adding "text-align:center" to the class or using the property "text-anchor:middle" on the text element, but these solutions did not work. Does anyone have any ideas on how to consistently align text to the center when changing its content?

Another interesting observation involves a specific SVG template where the text remains centered even with different content such as replacing "2013 Riesling" with a longer string of characters. Even after simplifying the template by removing unnecessary elements, the text still stays centered without any visible changes in the browser. This results in a significantly smaller SVG file size while maintaining text alignment. How is this possible?

csssvgadobe-illustrator

Answer №1

Adobe Illustrator has positioned your text in a way that aligns with your design, but keep in mind this positioning is specific to the text itself.

text-align: center won't be effective with SVGs since it's an HTML property.

To properly center the text, use text-anchor: middle. This property will center the text based on the coordinates you provide. Therefore, if you want the new text to be centered correctly, you must adjust the x coordinate of your text element.

In your case, the text is placed using a transform attribute. You can either modify the transform or replace it with x and y attributes.

For instance, if the center position for your text is calculated as (200, 305.2743), you should edit your text element like this:

<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>

The method you choose to determine the center position during runtime within a browser is up to you.

You could utilize getComputedTextLength() or getBBox() on the text element to calculate the width and then adjust your x coordinate accordingly.

Alternatively, consider adjusting your Illustrator file so that the placeholder text is something small like ".". This may bring you close enough to the center position without needing to alter the coordinates.

Answer №2

Unique workaround explanation:

The accepted answer highlighted the fact that Illustrator (2017.1.0 release) does not include the text-anchor=middle tag in its SVG exports. This limitation can be frustrating when aiming to use the SVG with dynamically generated and centered text.

To work around this issue, I stumbled upon the following solution:

Step 1: Design your artwork in AI with the text centered and positioned accurately within the text frame:

https://i.sstatic.net/p4dlC.png

Step 2: Before exporting the design as an SVG file, align the text to the right:

https://i.sstatic.net/jExrL.png

Step 3: Either manually or programmatically, add the text-anchor=middle attribute to the text frame:

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

Step 4: Sit back and admire the final result:

https://i.sstatic.net/spMyN.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use flex-grow and flex-wrap to split elements onto separate lines

My parent div, ".tags", contains both links and a title. The parent div is styled with "display: flex;" and "flex-wrap: wrap;". I want the link elements to move onto a new line when they wrap, without being pushed to the right of the screen by the title. ...

htmlcssflexbox

Fade effect on content in Bootstrap carousel

I am currently making some updates to the website mcelroymotors.com. One issue I have encountered while working on the homepage carousel is that the caption only pops up on the first slide, and does not appear on any of the subsequent slides. I would lik ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: https://i.sstatic.net/ra22j.png ...

csstypescriptreact-reduxbootstrap-4

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px> <div class="tant"><h3>More detailed inform ...

htmlcss

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

cssmobile

Including Previous & Next Buttons in Product Categories

I have set up the display of category products on the home page using the block below: {{block type="catalog/product_list" template="catalog/product/home_short.phtml" category_id="5" column_count="6"}}. I now want to include previous and next buttons to ...

phpjqueryhtmlcssmagento

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

jqueryhtmlcss

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

javascriptjqueryhtmlcssalert

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

jquerycssdatepickermodal-dialog

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml

Tips for aligning thumbnail text to the right on a small viewport with Bootstrap

Here is a visual representation of the standard thumbnail layout Once the viewport reaches the small size, the layout should switch to this design: Bootstrap only shrinks the container by default, as demonstrated in this jsfiddle: http://jsfiddle.net/32 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

javascriptphpjqueryhtmlcss

Adding SVG to Component

I am attempting to embed an SVG element (retrieved using http.get()) into a 'icon' component. export class BgIcon { private svgSrc_: string; icon_: Icon; @Input('svg-src') set svgSrc(value: string) { this.svgSrc_ = value; ...

svgtypescriptangular

Utilize the display: flex property to position a div in the bottom right corner of its containing element

I'm trying to showcase a yellow div "icon" at the bottom right corner of its red container "content". Can someone help me figure out what's incorrect in my code? .root { display: inline-flex; background-color: red; } .content { d ...

htmlcssflexbox

The menu will showcase all currently active sub-category items whenever an item below is selected (using Joomla/Mosets Tree)

I am currently managing a Joomla website that utilizes Mosets Tree for a business directory. One issue I have noticed is that on the right side of the site, all the categories are listed. When you expand sub-categories and then roll over to another menu it ...

phphtmlcssjoomla

Is it necessary to convert SCSS into CSS in React?

I have a query about whether it is necessary to first compile our scss files into css and then import the css files into our react components, or if we can simply import the scss directly into the components? I've successfully imported scss directly ...

cssreactjswebpacksasscreate-react-app

How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...

htmlcss

Is it possible to have square corners on the Vuetify Mobile Drawer component?

Currently, I am working with the Vuetify mobile drawer component and my goal is to give it square corners instead of the default rounded corners that are prevalent in Material design for all Vuetify components. While the Vuetify card component offers a " ...

cssvue.jssassvuetify.js