JQuery SVG绘制文本

Question

我正在创建一个HTML 5网站，使用Keith Wood的JQuery SVG库在SVG中执行某种形式的图表绘制。

我希望能够在SVG画布上绘制简单的文本 - 仅限标准文本（例如像单词或标题文本），这些都是在此网站上作为实际SVG给出的示例。

http://www.kevlindev.com/tutorials/basics/text/svg/index.htm

我查看了Jquery库网站上的API参考，但是得到的只是一个复杂的绘制波浪文本的示例，而我并不感兴趣。

有人能给我一个使用该库API编写文本的简单示例吗？

- CDrnly

Answer 1

以下是几个简单的jQuery SVG文本示例：

    // Simple jQuery SVG Text examples
    var g = svg.group(
        {fontWeight: 'bold', fontSize: '32.5', fill: 'salmon'}
    ); 
    svg.text(g, 10, 40, "Here's an example of SVG Text");         
    svg.text(g, 10, 80, "in an SVG 'group' wrapper"); 

    svg.text( 10, 130, "and without a wrapper (as an svg root)", 
        {fontWeight: 'bold', fontSize: '32.5', fill: 'gold'}
    ); 

- bob quinn

---

两种文本方法有什么区别：第一种以“g”作为第一个参数，第二种以数组作为第四个参数...？如果我使用第一种方法，它将始终将文本放置在其他图形下方 (http://stackoverflow.com/questions/20851768/jquerysvg-how-to-position-text-on-top-of-circle/20852171?iemail=1&noredirect=1#20852171)。 - Budda

区别在于第一个使用Raphael的svg.group()创建组对象，并初始化组共有的属性。然后，svgtext()调用引用对象'g'，并将文本字符串及其x、y位置添加到组中。因此，不需要为每个字符串初始化属性。第二种方法没有引用组对象，因此每个调用都必须包括任何相关的属性值。至于它在Raphael元素之上或之下的分层，请参见：https://dev59.com/Ymw15IYBdhLWcg3wfsBy - bob quinn

Answer 2

我最近在我的网站上讲解了这个问题，其中波浪文本示例包括textpath和.spam。 首先删除.spam引用 其次，文本路径用于控制句子中字母的初始位置，请尝试使用textpath将其变成简单的平面线条 通过在W3C SVG页面中探索选项来尝试路径 抱歉iPod的拼写错误

- Chasbeen