svg 创建文本 create text

最新推荐文章于 2025-09-26 01:00:12 发布

转载最新推荐文章于 2025-09-26 01:00:12 发布 · 2.4k 阅读

文章标签：

#function #session #string

SVG 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在SVG中动态创建文本元素，并提供了一个示例代码片段，演示了如何使用JavaScript通过SVG文档对象模型来添加和设置文本。

既然svg无法显示换行文本，则必须创建多个文本。怎么创建呢，下面是个网上的例子，不太好找，把它转过来。

(http://osdir.com/ml/text.xml.svg.devel/2002-08/msg01252.html)

node=svgdoc.createElement("text");
node.setAttribute("id",yourId);
node.setAttribute("x",yourx);
node.setAttribute("y",youry);
node.setAttribute("style",yourstyle);
textnode=svgdoc.createTextNode("Hello Dynamic Text");
node.appendChild(textnode);
yourparent.appendChild(node);

this should do the job...

the only difference is that you have to create a special textNode that will be
appended to the text-element, which is then appended to it's parent.

Hope this helps,
Andreas

--- In svg-developers@xxxx, "dennis_joel_david" <dennis.myren@xxxx> wrote:
> Isnt it possible todynamically create a text element and setting its
> text?
> I am trying to use this function to achieve this.
> This doesnt work, but it seems like when I have already a text
> element with this id, and where text is more than empty string
> already, there is no problem.
> What am I doing wrong?
> Because it has to be possible, because I dont know how many text
> elements will be created during the session when my SVG document
> loads.
> Thank you
> Dennis
> function createTextElement(text, x, y)
> {
> Ind = _osvgdoc.createElement('text');
> Ind.setAttribute('id', '1100');
> Ind.setAttribute('x', x + (width / 2));
> Ind.setAttribute('y', y + (height / 2) + 10);
> Ind.setAttribute('style', 'text-anchor:middle; font-size:16; font-
> family:Arial; fill:black;');
> Ind.setData('kalle');
> //Ind.getFirstChild().setData('kalle');
> parent.appendChild(Ind);
> }