通过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');
”
它会销毁父<textpath>
元素的<text>
子元素。
检查小提琴:https://jsfiddle.net/JayKandari/476n8t82/
我的问题是,我们是否有任何插件(或代码)可用于更新&amp;读取任何类型(简单和嵌套)的SVG文本对象。谢谢!
答案 0 :(得分: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())
或者这可能适用于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;
};
});
答案 1 :(得分:0)
这似乎是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);