javascript - 无法使用 Snap.svg 在文本路径上设置 startOffset 属性

Question

我正在尝试使用 Snap.svg 在圆弧中间呈现文本。

这可以通过这样的 SVG 实现:

<defs>
    <path id="path1" d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"/>
</defs>
<text text-anchor="middle">    
    <textPath xlink:href="#path1" startOffset="50%">
        Text on a curved path
    </textPath>
</text>

我得到的是这样的(请忽略具体坐标):

<path d="M 352.5 14.1 A 338.4 338.4 0 0 1 645.5 183.3" id="path1"></path>
<text x="0" y="0" style="text-anchor: middle;">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1">
        Lorem Ipsum
    </textPath>
</text>

当我在 Snap.svg 中执行此操作时:

var labelArc = paper
               .path('M 352.5 14.1 A 338.4 338.4 0 0 1 645.5 183.3')
               .attr('startOffset': '50%'});

paper
.text(0, 0, 'Lorem Ipsum')
.attr({
    'text-anchor'   : 'middle',
    'textpath'      : labelArc
});

问题是 startOffset 属性没有传递给文本路径。通过 CSS 设置此属性也不起作用。

我做错了什么还是需要一些奇特的解决方法？

Answer 1

好吧，我想出了一个办法......

只需将文本分配给一个变量并像这样设置 startOffset:

var label = paper
            .text(0, 0, 'Lorem Ipsum')
            .attr({
                'text-anchor'   : 'middle',
                'textpath'      : labelArc
            });
label.textPath.attr({ startOffset: '50%' });

可能有更优雅的方法，但这至少是可行的。