how to use SVG textpath in persian(rtl) text

Question

I want to use the textpath feature for Persian text, but when I do this Persian text separates into letters:

Correct Persian text without using the textpath feature: تی مدیا مرکز تخصصی ارائه خد مات سئو

Answer 1

This is a consequence of the algorithm that SVG specifies for laying out text on a path.

http://www.w3.org/TR/SVG/text.html#TextpathLayoutRules

The algorithm specifies that each character be positioned intact and rotated to orient with the tangent of the path at that point.

However the SVG specification provides an attribute called method, on <textPath> elements, that is supposed to do what you want.

http://www.w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute

Unfortunately, no browser currently supports it AFAIK.

Answer 2

Similarly, You can edit your text with "Shetab Farsi Negar 3.8" SoftWare. this link for download this SoftWare : Shetab Farsi Negar 3.8 (password: www.p30download.com)

If the link does not work, you can search for this software on Iranian websites.

Example

The correct code to your question:

.contain-demo {
  margin: 50px auto;
  text-align: center;
}

<div class="contain-demo">
  <svg width="620" height="200">
     <defs>
        <path id="testPath" d="M3.858,58.607
        c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628  c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
    </defs>
    <text x="2" y="40%" fill="#765373" font-size="30" font-family="'Lato', sans-serif">
      <textPath xlink:href="#testPath">ﻥﺍﺮﯾﺍ ﺭﺩ ﻮﺌﺳ ﺕﺎﻣﺪﺧ ﯽﺼﺼﺨﺗ ﺰﮐﺮﻣ ﺎﯾﺪﻣ ﯽﺗ</textPath> 
    </text> 
  </svg>
</div>