gpt4 book ai didi

javascript - WheelNav.js SVG RTL 阿拉伯文本环绕

转载 作者:行者123 更新时间:2023-11-28 03:51:24 24 4
gpt4 key购买 nike

我有一些用阿拉伯语写的文本,我在将它包装在 wheelnav.js 导航项中时遇到了一些问题,这是一个 jsFiddle:

WheelNav.js Arabic Text Wrapping Problem jsFiddle

我一直在考虑注入(inject)一个 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>

我很感激我能得到的任何帮助,甚至是替代解决方案。

最佳答案

您可以在此处为此修改 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 分支。

可以找到来源here .

我找到了 GitHubGist这会很有用。

关于javascript - WheelNav.js SVG RTL 阿拉伯文本环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43705552/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com