How To Find startOffset based on total word in SVG <text><textPath> With JS and replace dynamically

user_18469111 0
Viewed 66

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>

css html javascript
1 Answers

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>

user_117426340
Related