Question

我有一些用阿拉伯语写的文字，我在wheelnav.js导航项中包含它有点问题，这里有一个jsFiddle：

我一直在考虑注入一个可以解决问题的SVG foreignobject ，我知道如何做但不完全知道wheelnav.js的哪个部分要做，这是来自mozilla dev的示例代码：

<svg width="400px" height="300px" viewBox="0 0 400 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>This example uses the 'switch' element to provide a 
        fallback graphical representation of a paragraph, if 
        XHTML is not supported.</desc>

  <switch>


    <foreignObject width="100" height="50"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML content goes here -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
      </body>
    </foreignObject>

    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Here is a paragraph that</tspan>
      <tspan x="10" y="20">requires word wrap.</tspan>
    </text>
  </switch>
 </svg>

我感谢我能得到的任何帮助，甚至是其他解决方案。

Answer 1

你可以在这里修改wheelnav.js：

//Title defined by path
if (wheelnavTitle().isPathTitle(this.title)) {
    this.navTitle = this.wheelnav.raphael.path(currentTitle.path);
}
//Title defined by image
else if (wheelnavTitle().isImageTitle(this.title)) {
    this.navTitle = this.wheelnav.raphael.image(currentTitle.src, sliceInitPath.titlePosX - (this.titleWidth / 2), sliceInitPath.titlePosY - (this.titleHeight / 2), this.titleWidth, this.titleHeight);
}
//Title defined by text
else {
    this.navTitle = this.wheelnav.raphael.text(sliceInitPath.titlePosX, sliceInitPath.titlePosY, currentTitle.title);
}

您必须为foreignobject添加其他分支。

您可以找到来源here。

我找到了一个有用的GitHubGist。

WheelNav.js SVG RTL阿拉伯语文字环绕

1 个答案: