得到&设置使用具有“textpath”属性的Snap SVG创建的SVG Text对象的“text”

时间:2016-06-16 17:25:47

标签: javascript svg raphael snap.svg

通过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文本对象。谢谢!

2 个答案:

答案 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())

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

答案 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);