不能用Snap.svg在文本路径上设置startOffset属性

Can not set startOffset attribute on textpath with Snap.svg

本文关键字：设置 startOffset 属性 路径 文本 Snap svg 不能      更新时间：2023-09-26

我试图用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属性没有传递给textpath。通过CSS设置此属性也不工作。

是我做错了什么，还是需要一些花哨的解决方案?

好吧，我想到了一个办法…

简单地将文本赋值给一个变量，并像这样设置startOffset:

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

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

相关文章：