Last Alphabet of SVG text is cutting in Firefox-CodePudding

I have this Simple SVG with text inside, on chrome and Safari its working fine, but on FIREFOX the last alphabet of the text is not showing at all. (in this case 'l' from 'atul' is not showing on firefox.)

<svg viewBox="0 0 100 100" height="250" width="250">
  
    <path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="1.99" style="fill: red;"></path>    
  <text font-size="6" text-anchor="middle">
    <textPath href="#p1" startOffset="1" side="center" style="letter-spacing:1px;font-weight:600;text-transform:uppercase; dominant-baseline: ideographic;">Atul</textPath>    
  </text>
</svg>

just copy and paste this svg in your HTML and try to render it in Firefox.

I want to understand the problem along with solution if anyone can explain please.

Thanks in advance.

CodePudding user response：

I'm not able to explain this, but here I have three different SVG elements. The first two are modified versions of the code that I copied from your snippet. They both have the issue. And the last one is an edited version of the example on MDN. So, example 2 and 3 are how I would write the code -- using SVG attributes for most of the styling, but most importantly the pathLength should have a larger value to avoid any rendering problems.

Even though I removed all the attributes and styling possible from example 1 it still has the issue. And as I see it example 2 and 3 are exactly the same code (except from the ids referring to the paths), so I'm not able to explain the difference.

If anyone can spots the difference please comment.

Well, try to rewrite your code...