2

I am trying to create an oval-shaped text paragraph, I used an SVG and set the text path, and added start-offset but the problem is that I cannot estimate the length of the paragraph and if the length of the paragraph is greater then the words will be messed up

Here is the image where I show all the issues enter image description here

  1. What I want
  2. What I tried
  3. The problem I'm facing

When word length is higher all worse messing up.

can we dynamic set start-offset based on words length.

<svg width="500" height="400" viewBox="0 -15 200 130" style="transform: rotate(71deg);">
  <path d="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0" fill="transparent"></path>
  <path id="shape2" d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0" fill="none"></path>
  <path id="shape" d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0" fill="transparent" stroke="transparent"></path>
          <text><textPath startOffset="0" xlink:href="#shape2">bag</textPath></text>
        <text><textPath startOffset="30" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="60" xlink:href="#shape2">bag</textPath></text>
          <text><textPath startOffset="90" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="120" xlink:href="#shape2">bag</textPath></text> 
        <text><textPath startOffset="150" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="170" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="200" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="230" xlink:href="#shape2">bag</textPath></text>
          <text><textPath startOffset="260" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="290" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="320" xlink:href="#shape2">bag</textPath></text>
          <text><textPath startOffset="360" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="390" xlink:href="#shape2">bag</textPath></text>
         <text><textPath startOffset="420" xlink:href="#shape2">bag</textPath></text>
<text><textPath startOffset="450" xlink:href="#shape2">bag</textPath></text></svg>
Dave
  • 3,073
  • 7
  • 20
  • 33
Calvin
  • 55
  • 3
  • You can estimate the text's length using canvas, but the font-size must be known. Check this answer: https://stackoverflow.com/a/21015393/7982963 – Moaaz Bhnas Mar 15 '22 at 07:46
  • But I don't know how to implement in this case – Calvin Mar 15 '22 at 07:48
  • How to implement what exactly? – Moaaz Bhnas Mar 15 '22 at 08:22
  • I'm sorry, I'm trying to create 1. point oval shape with Text I tried with SVG start offset but word lengths are not the same so its messy with other words I can't set offset manually each time, so How can I make this dynamically auto adjust with JS ? – Calvin Mar 15 '22 at 08:45

1 Answers1

2

No Need to use startOffset
Just Use this code

<svg xmlns="http://www.w3.org/2000/svg" width="550.156" height="658.647" viewBox="0 0 550.156 658.647">
  <path id="Ellipse_91"  d="M194,0C301.143,0,388,126.032,388,281.5S301.143,563,194,563,0,436.968,0,281.5,86.857,0,194,0Z" transform="matrix(0.946, -0.326, 0.326, 0.946, 0, 126.321)" fill="transparent" />



      <text>
      <textPath xlink:href="#Ellipse_91" class="svg_title">        
      bag  bag   bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag  bag
      </textPath>
    </text>
      </svg>
taruuunnn
  • 80
  • 7