javascript - 获取并设置使用具有“textpath”属性的Snap SVG创建的SVG Text对象的“文本”

通过Snap.SVG可以轻松读取和更新<text>元素的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');”
销毁父<textpath>元素的<text>子元素。

检查小提琴：https://jsfiddle.net/JayKandari/476n8t82/

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

最佳答案

我不认为这是个错误，而是了解幕后发生的事情。

创建文本元素时，您确实具有text属性。但是，使用SVG，当您创建textPath时，该文本将移至textPath元素。因此，您实际上必须查询Duopixel所做的textPath元素。

您可以创建一个插件来有所帮助，但它的作用与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

否则这可能对text和textPath都适用

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

jsfiddle