我正在尝试使用 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 设置此属性也不起作用。
我做错了什么还是需要一些奇特的解决方法?
最佳答案
好吧,我想出了一个办法......
只需将文本分配给一个变量并像这样设置 startOffset:
var label = paper
.text(0, 0, 'Lorem Ipsum')
.attr({
'text-anchor' : 'middle',
'textpath' : labelArc
});
label.textPath.attr({ startOffset: '50%' });
可能有更优雅的方法,但这至少是可行的。
关于javascript - 无法使用 Snap.svg 在文本路径上设置 startOffset 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31494546/