CODEWITHSUNDEEP
javascriptjquerysvg
Budda
Budda

Reputation: 18353

jquery+svg: how to position text on top of circle?

I draw a circle using svg jquery

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

On top of it I want to put a text:

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

The problem is that text is always "underneath" the circle and it partially not visible.

How can I bring text on top of circle? Is there something like z-order in svg?

Thank you very much!

Upvotes: 0

Views: 605

Answers (2)

Budda
Budda

Reputation: 18353

That code works:

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

So the difference is that style should be passed not as 'group' object in a 1st parameter, but as a pure array in 4th.

Dunno actually, why "group" doesn't work as I see reference that recommended it.

Upvotes: 0

Rethna
Rethna

Reputation: 241

When i tried with the same kind of code, it works fine.

My code:

$(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");
    }
});

Also, before the code we may need to include the piece of css.

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

I got this from the sample files (svgBasic.html) present inside the jquery.svg library.

Upvotes: 1

Related Questions