Javascript WheelNav.js SVG RTL阿拉伯文文本包装_Javascript_Css_Svg_Wheelnav.js

Javascript WheelNav.js SVG RTL阿拉伯文文本包装

javascript css svg

Javascript WheelNav.js SVG RTL阿拉伯文文本包装,javascript,css,svg,wheelnav.js,Javascript,Css,Svg,Wheelnav.js,我有一些文字是用阿拉伯语写的，我有一个小问题，将它包装在一个wheelnav.js导航项中，下面是一个jsFiddle：我一直在考虑注入一个SVGforeignobject，希望它能解决这个问题，我知道怎么做，但不知道在wheelnav.js的哪个部分，下面是来自mozilla开发的示例代码： <svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"&g

我有一些文字是用阿拉伯语写的，我有一个小问题，将它包装在一个wheelnav.js导航项中，下面是一个jsFiddle：

我一直在考虑注入一个SVGforeignobject，希望它能解决这个问题，我知道怎么做，但不知道在wheelnav.js的哪个部分，下面是来自mozilla开发的示例代码：

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


此示例使用“switch”元素提供
段落的回退图形表示，如果
不支持XHTML。
这里有一段需要换行
这里有一段
需要换行。

非常感谢您提供的任何帮助，甚至其他解决方案。

您可以在此处修改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添加其他else分支

你可以找到来源

我找到了一个有用的方法。

您在其中一些行中使用了换行符（\n）。有什么原因不能直接使用它吗？换行符\n适用于英语单词，但如果是阿拉伯语，单词排列不正确，有时段落的开头从底线开始，到顶端以断头结束，我已经写了一个算法来反转整个段落，它确实在逻辑上反转了它，但是结果几乎是一样的，例如阿拉伯语的这句话：如果我像我所做的那样添加换行符，它是从右到左的，它应该从这个角度看：那么文本是动态的吗？你事先不知道它将是什么？确切地说，文本是从数据库中提取的，可以是不同的，这意味着我不能使用图像/图标作为文本替换…或者我可以吗？我以前也经历过这些，我试图动态创建一个外来对象并将其添加到导航标题中，但我认为这样做是错误的，我下一步尝试的是修改raphael.js（未压缩源代码）R._engine.text=函数（svg，x，y，text），将外来对象添加到svg画布上，它起到了一定的作用，现在正确显示了阿拉伯语包装的文本，但它似乎处于绝对模式，根本不会随滚轮旋转，有什么想法吗？你把你的新对象添加到布景里了吗？