Question

有没有办法使用SnapSVG使用textpath？我尝试使用textPath作为属性，但它似乎没有在文本节点中添加textpath元素。

var txtpth = s.path("M70 70 Q 80 90 200 150 L 200 400").attr({
    fill: "none",
    stroke: "black"
 });
var crooked = s.text(0,0,"lorempsum ipsum lorempsum ipsum lorempsum ipsum lorempsum   ipsum").attr({
     textPath: txtpth,
     stroke:"black"
 });

我没有看到使用snap.svg在SVG中操作文本路径的直接API。

Answer 1

使用defs，path和textpath创建一个完整的SVG xml，在现有的Snap文档中创建了一个重复的DEFS标记。我做了类似下面的事情以逃避这个问题。总的来说，您的解决方案似乎有效。

var txt = s.text(50,50,"").attr({
    stroke: "black",
    fill:"none",
    fontFamily: "Helvetica Nueue, Helvetica, sans-serif",
    fontWeight: "bold"
});
var myFrag = Snap.parse('<path id="MyPath" d="M 50 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/>');
var txtpath = Snap.parse('<textPath id="myTextPath" xlink:href="#MyPath">We go up, then we go down, then up again</textPath>');
var defns = s.select('defs');
defns.append(myFrag);
txt.append(txtpath);
console.log("Definitions: -->" + defns.toString());

console.log("Text Element: -->" + txt.toString());

<强>输出：

Definitions: --><defs><radialGradient cx="145" cy="331" r="38"><stop offset="0%" stop-color="#ffffff"/><stop offset="50%" stop-color="#4b4b7b"/><stop offset="100%" stop-color="#444444"/></radialGradient><rect width="10" height="10" class="svg---mgr"/><path id="MyPath" d="M 50 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/></defs>

Text Element: --><text x="50" y="50" stroke="#000000" fill="none" style="font-family: 'Helvetica Nueue', Helvetica, sans-serif; font-weight: bold;"><textPath id="myTextPath" xlink:href="#MyPath">We go up, then we go down, then up again</textPath></text>

但是，我不确定这是否是一种非常优雅的方式。我认为应该提供一个API来实现这一目标。最好像接受一个textPath字符串一样，内部完成我们上面做的相同的事情。

Answer 2

此选项现在可用于最新的开发版本（0.2以后）。所以你现在可以做这种事了....（这不适用于0.1）

var s = Snap("#svgout"); 

var path = "M 100 200 C 200 100 300   0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100";

var text = s.text(50,50,'Hi there')
              .attr({ 'textpath': path })
              .textPath.animate({ 'startOffset': 2000 }, 5000 );

http://svg.dabbles.info/snaptut-textpath.html

Answer 3

不确定这是否是一种糟糕的方式，但是一种解决方法（因为我无法在Snap本身中解决它），可能是在SVG中解析并使用它......这样的事情......

s = Snap(800, 800);

var myPath = "M70 70 Q 80 90 200 150 L 200 400";
var myText = "lorempsum ipsum lorempsum ipsum lorempsum ipsum lorempsum   ipsum";

var myFrag = Snap.parse('<defs><path id="MyPath" d="' + myPath + '" /> </defs> \
   <text font-family="Verdana" font-size="42.5"> \
     <textPath id="myTextPath" xlink:href="#MyPath">' + myText + '</textPath> \
   </text>\
 ');

s.append( myFrag );
var tp = s.select("#myTextPath");
tp.animate({ 'startOffset': 2000 }, 5000 );

jsfiddle here http://jsfiddle.net/Wetw4/5/它不理想，但可能会提供一些想法。

如何在snap.svg中使用textPath作为文本？

3 个答案: