Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript SVG textPath沿路径正确对齐文本_Javascript_Svg_Snap.svg - Fatal编程技术网

Javascript SVG textPath沿路径正确对齐文本

Javascript SVG textPath沿路径正确对齐文本,javascript,svg,snap.svg,Javascript,Svg,Snap.svg,我想沿着SVG路径对齐文本,但SVG似乎不想将其对齐到所有字母正确旋转的行上方: 如何将文本与曲线上方对齐,使其可读,而不是像上图中那样 我使用库进行SVG操作,我的代码如下所示: var path = snapelement.path("M 540,0 S 150, 460, 150, 540") .attr({fill : "transparent", stroke : "#000", strokeWidth : 4}) var note = snapelement

我想沿着SVG路径对齐文本,但SVG似乎不想将其对齐到所有字母正确旋转的行上方:

如何将文本与曲线上方对齐,使其可读,而不是像上图中那样

我使用库进行SVG操作,我的代码如下所示:

var path = snapelement.path("M 540,0 S 150, 460, 150, 540")
           .attr({fill : "transparent", stroke : "#000", strokeWidth : 4})

var note = snapelement.text(0, 0, "EXAMPLE TEXT")
           .attr({"textpath" : path, "font-family" : "Helvetica Neue", "font-size" : 14});

任何建议,即使是纯粹的SVG解决方案,我们都将不胜感激。

只要颠倒您的路径就可以了。如果这样做,文本将位于行的另一侧

在本例中,您使用的是没有前面路径段的“S”路径命令,因此计算反向路径有点棘手。以下是示例路径的相反方向:

var path = snapelement.path("M 150,540 C 150,540, 150,460, 540,0")

非常感谢。我想了想,只是不知道有更好的方法来达到同样的效果。我对SVG比较陌生,所以感谢您的澄清!