Question

我想用svg.js沿着弧线绘制一个“居中”的动态文本。意味着文本的中间始终位于弧的最顶点。

在静态html中（意思是：没有svg.js）它运行正常。类似的东西：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<defs>
        <path id="myPathTop" d="M150,250 A100,100 0 1,1 151,250" />
    </defs>
    <text style="stroke: #000000;" id="idTextTop" font-family="Arial" font-size="20" text-anchor="middle">
    <textPath xlink:href="#myPathTop" startOffset="50%" id="idTextPathTop" >
            A nice, long, centred text along an arc path...
    </textPath>
    </text>
</svg>

结果见： http://s28.postimg.org/wxs58d58d/svg_arctext_OK.png

'text-anchor =“middle”'和'startOffset =“50％”的组合实现了文本的居中。

尝试在svg.js中执行此操作但是我没有（还）成功：

var defs = svg.defs(); 
var path = svg.createPath(); 
//[...set some vars, then ....]
svg.path(defs, path.move(startX, startY).arc([[radius, radius, rotateX, drawLargeArc, drawClockwise, endX, endY, relativeValues]]), {id: 'myPathTop'});
var text = svg.text('', {fontFamily: 'Arial', fontSize: '20', textAnchor: 'middle'}); 
var texts = svg.createText(); 
svg.textpath(text, '#myPathTop', texts.string('A nice, long, centred text along an arc path...'), {id: 'MyTextPath', startoffset: 0.5} );

结果是： http://s28.postimg.org/8srfqnkxp/svg_arctext_error.png

显然“startoffset：0.5”不被视为。

我检查了Keith Woods svgRef.html和几个例子，但是无法让它工作。

有人有任何想法，我做错了吗？

提前多多感谢。

svg.js的问题，沿弧绘制居中文本

0 个答案: