SVG টেক্সট বক্সের প্রস্থ (Width) নির্ধারণ বা 'x' ক্যারেক্টারের পর লাইন ব্রেক ফোর্স করা

SVG-এ টেক্সট র‍্যাপিং (Wrapping) নেটিভভাবে নেই

SVG 1.1-এ `` এলিমেন্টে অটো-র‍্যাপ নেই। SVG 2.0-এ `inline-size` প্রোপার্টি আসছে কিন্তু ব্রাউজার সাপোর্ট সীমিত। সমাধান: JavaScript দিয়ে ম্যানুয়াল লাইন ব্রেক (`\n` বা ``)।

Raphaël.js উদাহরণ (ওরিজিনাল কোড থেকে রিফাইনড)

 {
  const testLine = currentLine + (currentLine ? ' ' : '') + word;
  textEl.attr('text', testLine);
  const bbox = textEl.getBBox();

  if (bbox.width > maxWidth && currentLine) {
    lines.push(currentLine);
    currentLine = word;
  } else {
    currentLine = testLine;
  }
});
if (currentLine) lines.push(currentLine);

// ফাইনাল: tspan দিয়ে মাল্টি-লাইন
textEl.attr('text', ''); // ক্লিয়ার
lines.forEach((line, i) => {
  const tspan = paper.text(100, 100 + i * 1.2 * 14, line).attr({ 'text-anchor': 'start', 'font-size': 14 });
  // Raphaël-এ tspan সরাসরি add করা যেতে পারে না, তাই আলাদা text এলিমেন্ট বা SVG স্ট্রিং বিল্ড করুন
});

// অথবা SVG স্ট্রিং বিল্ড:
const svgNS = 'https://www.w3.org/2000/svg';
const svgText = document.createElementNS(svgNS, 'text');
svgText.setAttribute('x', 100);
svgText.setAttribute('y', 100);
lines.forEach((line, i) => {
  const tspan = document.createElementNS(svgNS, 'tspan');
  tspan.setAttribute('x', 100);
  tspan.setAttribute('dy', i === 0 ? '0' : '1.2em');
  tspan.textContent = line;
  svgText.appendChild(tspan);
});
document.querySelector('svg').appendChild(svgText);

আধুনিক বিকল্প: `` + HTML

স Faces: সিম্পল কেসের জন্য `` + HTML সবচেয়ে সহজ; জটিল লেআউটের জন্য D3.js বা Manual `` পজিশনিং।