如何在波斯语（rtl）文本中使用 SVG 文本路径答案

【问题标题】：how to use SVG textpath in persian(rtl) text如何在波斯语（rtl）文本中使用 SVG 文本路径
【发布时间】：2015-07-11 21:47:48
【问题描述】：

我想对波斯文本使用 textpath 功能，但是当我这样做时，波斯文本会分成字母：

在不使用文本路径功能的情况下更正波斯文本： تی مدیا مرکز تخصصی ارائه خد مات سئو

【问题讨论】：

添加语言和目录：w3.org/International/tutorials/svg-tiny-bidi

标签： svg right-to-left persian

【解决方案1】：

这是 SVG 指定的用于在路径上布局文本的算法的结果。

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

该算法指定每个字符原封不动地定位并旋转以与该点的路径切线对齐。

然而 SVG 规范在 <textPath> 元素上提供了一个名为 method 的属性，它应该可以满足您的需求。

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

不幸的是，AFAIK 目前没有浏览器支持它。

【讨论】：

【解决方案2】：

同样，您可以使用“Shetab Farsi Negar 3.8”软件编辑文本。此软件下载链接：Shetab Farsi Negar 3.8（密码：www.p30download.com）

如果链接失效，您可以在伊朗网站上搜索该软件。

Example

您问题的正确代码：

.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>

【讨论】：