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

Question

易于阅读和更新<text> Snap.SVG 元素的文本属性

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> parent 的 child <text>元素。

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

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

Answer 1

我认为这与其说是一个错误，不如说是了解幕后发生的事情。

当您创建文本元素时，您确实有一个文本属性。但是，使用 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

或者这可能适用于文本和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