[英]Can not set startOffset attribute on textpath with Snap.svg
I am trying to render text in the middle of an arc with Snap.svg. 我试图用Snap.svg在弧形中间渲染文本。
This is possible with SVG like this: 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>
What I get is this (please ignore the specific coordinates): 我得到的是这个(请忽略具体的坐标):
<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>
when I do this in Snap.svg: 当我在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
});
The problem is that the startOffset
attribute is not passed to the textpath. 问题是startOffset
属性未传递给textpath。 Setting this attribute via CSS did not work either. 通过CSS设置此属性也不起作用。
Am I doing something wrong or does it require some fancy workaround? 我做错了什么还是需要一些花哨的解决方法?
Ok, I figured out a way to do it... 好的,我想出办法来做到这一点......
Simply assign the text to a variable and set startOffset like so: 只需将文本分配给变量并设置startOffset,如下所示:
var label = paper
.text(0, 0, 'Lorem Ipsum')
.attr({
'text-anchor' : 'middle',
'textpath' : labelArc
});
label.textPath.attr({ startOffset: '50%' });
There might be a more elegant way of doing it, but this is at least working. 可能有更优雅的方式,但这至少有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.