Hey there! I’ve run into similar Fabric.js text alignment quirks before, so let’s break down what’s happening and how to fix it.

Why the Alignment Breaks After Replacing Variables #

When you set textAlign: 'center' in Fabric.js, it normally handles adding the correct text-anchor="middle" attribute to the SVG’s <text> or <tspan> elements during rendering. But if you’re replacing the template variable {company_address} directly in the exported SVG string (instead of updating the Fabric text object itself), you’re bypassing Fabric’s internal layout calculations. This means the SVG loses the auto-generated text-anchor property, and the text no longer aligns correctly.

Solutions to Fix the Centering Issue #

1. Update the Fabric Text Object Directly (Recommended)

Instead of modifying the SVG string after export, update the text content through Fabric’s API first, then re-render and generate the SVG. This ensures Fabric handles the alignment properly:

// Assume your text object is stored in a variable like addressText
addressText.set({
  text: '123 Main St, Cityville, Country', // Your actual address
  textAlign: 'center'
});
canvas.renderAll(); // Let Fabric recalculate layout and alignment

// Now generate the SVG with correct alignment
const finalSVG = canvas.toSVG();

This method guarantees that Fabric adds the text-anchor="middle" attribute to the appropriate SVG elements automatically.

2. Manually Add text-anchor="middle" to SVG (If You Must Modify the SVG Directly)

If you have to edit the SVG string after export, make sure you add the attribute to the right elements:

• For single-line text, add text-anchor="middle" to the parent <text> element:

  <text x="200" y="150" text-anchor="middle">123 Main St, Cityville, Country</text>
  

• For multi-line text (using <tspan>), you can either add the attribute to the parent <text> (all tspans will inherit it) or to each individual <tspan>:

  <text x="200" y="150" text-anchor="middle">
    <tspan x="200" dy="1.2em">123 Main St</tspan>
    <tspan x="200" dy="1.2em">Cityville, Country</tspan>
  </text>
  

  Also double-check that the x coordinate of the text/tspan is set to the horizontal center of your card container—Fabric normally handles this, but manual edits might require adjusting it.

Correct Usage of text-anchor: middle in SVG #

• text-anchor="middle" tells SVG to align the horizontal midpoint of the text with the x coordinate of the <text> or <tspan> element.
• Unlike CSS text-align, which aligns text within a block container, SVG’s text-anchor aligns text relative to its own x position. So you need to ensure the x value is set to the center of your desired area for proper centering.
• In Fabric.js, setting textAlign: 'center' automatically sets both text-anchor="middle" and adjusts the x position to the center of the text object’s bounding box, so you don’t have to calculate it manually.

内容的提问来源于stack exchange，提问作者DS9