Question

我使用svg jquery

绘制一个圆圈

_svg.circle(_X, _Y, _R, { fill: 'yellow', stroke: 'black', strokeWidth: 1 });

除此之外，我想写一个文字：

var _svgGroup = _svg.group({ fontSize: '11', fill: 'black' });
_svg.text(_svgGroup, _X, _Y + 15, "#");

问题是文字始终在＆＃34;下面＆＃34;圆圈，部分不可见。

如何在圆圈上方放置文字？在svg中是否有类似z-order的东西？

非常感谢！

Answer 1

当我尝试使用相同类型的代码时，它可以正常工作。

我的代码：

$(function() {
    $('#svgbasics').svg({onLoad: drawInitial});
    function drawInitial(svg) {
        var _X = 200;
        var _Y = 200;
        var _Z = 100;
        svg.circle(_X, _Y, _Z, { fill: 'yellow', stroke: 'black', strokeWidth: 1 });
        var _svgGroup = svg.group({ fontSize: '11', fill: 'black' });
        svg.text(_X, _Y + 15, "Hello World");
    }
});

此外，在代码之前，我们可能需要包含一块css。

<style type="text/css">
@import "jquery.svg.css";
#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>

我是从jquery.svg库中的示例文件（svgBasic.html）中得到的。

Answer 2

该代码有效：

var _svgTextStyle = { fontSize: '11', fill: 'red' };
var _svgCircleStyle = { fill: 'yellow', stroke: 'black', strokeWidth: 1 };
_svg.circle(pos.getPosX() + 7, pos.getPosY() + 0, 7, _svgCircleStyle);
_svg.text(pos.getPosX() + 0, pos.getPosY() + 10, pos.getId() + "", _svgTextStyle);

所以区别在于样式不应该作为第一个参数中的'group'对象传递，而应该作为第4个中的纯数组传递。

实际上，Dunno为什么“群组”不起作用，因为我看到推荐它的参考。

jquery + svg：如何在圆圈上方放置文字？

2 个答案: