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%' });

可能有一种更优雅的方式，但这至少有效。

无法使用Snap.svg在textpath上设置startOffset属性

1 个答案: