2

有没有办法使用 SnapSVG 使用文本路径？我尝试使用 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。

4

3 回答 3

2

使用 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 字符串，它在内部做我们上面做的同样的事情。

于 2014-01-02T19:31:00.483 回答
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

于 2014-01-07T10:19:35.113 回答
1

不确定这是否是一种不好的方法，但是一种解决方法（因为我无法仅在 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/它并不理想，但可能会给出一些想法。

于 2014-01-01T12:15:30.793 回答