获取和设置 "text" 使用 Snap SVG 创建的具有 "textpath" 属性的 SVG 文本对象

Question

Snap.SVG

阅读和更新 <text> 元素的文本属性很容易

var paper = Snap(400, 400);
var t = paper.text(10, 10, 'Lorem Ipsum');
// change text simpy by changing 'text' attribute
t.attr('text', 'New Text');

假设，如果我们有一个附加到文本元素的 textpath 属性。

如果我们做“t.attr('text', 'New Text');” 它会破坏父元素 <text> 的 <textpath> 子元素。

检查 fiddle : https://jsfiddle.net/JayKandari/476n8t82/

我的问题是，我们是否有任何插件（或代码）可用于更新和读取任何类型（简单和嵌套）的 SVG 文本对象。谢谢！

Answer 1

这似乎是 SnapSVG 中的错误。您可以切换到普通 JS/DOM 来执行 gets/sets:

var paper = Snap(400, 400);

var t = paper.text(0,20, 'Snap.SVG is awesome !');

t.attr({textpath : 'M10,10L300,300'});
var textPath = t.node.querySelector("textpath");

// SET
textPath.textContent = "Changing content";
// GET
console.log(textPath.textContent);

Answer 2

我不认为它是一个错误，因为了解幕后发生的事情。

当您创建一个文本元素时，您确实有一个文本属性。但是，对于 SVG，当您创建 textPath 时，该文本将移动到 textPath 元素。所以你实际上必须查询 textPath 元素，这就是 Duopixel 所做的。

您可以创建一个插件来提供一点帮助，但它与 Duopixels 解决方案的作用有点相同...

Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.textPathText = function( text ) {
            return text ? this.select('textPath').node.textContent=text :  this.select('textPath').node.textContent;
    };
});

alert(t.textPathText())
t.textPathText('Snap is still awesome')
alert(t.textPathText())

jsfiddle

或者这可能对文本和文本路径都有效

Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.innerText = function( text ) {
            return text ? this.node.firstChild.textContent=text :  this.node.firstChild.textContent;
    };
});

jsfiddle

获取和设置 "text" 使用 Snap SVG 创建的具有 "textpath" 属性的 SVG 文本对象

Get & Set "text" of SVG Text object created with Snap SVG having "textpath" attribute

javascript

svg

raphael

snap.svg