CODEWITHSUNDEEP
javascriptd3.jssvg
Sayantan
Sayantan

Reputation: 329

Does x,y attributes of a SVG really work?

I am working with SVG and a bit confused with x and y attributes of the SVG element itself. They do not appear to be working. Here is the code

$(document).ready(function(){
    console.log("Ready");

    var svg = d3.select('#container')
    .append('svg')
    .attr({
        x: 0,
        y: 0,
        width: 200,
        height: 100
    });

    svg.append('circle').attr({
        cx: 100,
        cy: 50,
        r: 30,
        'stroke': 'black',
        fill: 'white',
        'stroke-width': 1
    });
});

When I change the x and y of the SVG, the circle is not moving accordingly. Say I want to start SVG at (20, 10) inside the parent DIV. I know I can move the cx and cy of the circle but I wanted to know why the SVG itself is not moving. Does it forcefully start at (0, 0) inside the parent DOM element? Then what are the x and y used for? Any help is appreciated. Thank you.

Upvotes: 1

Views: 2416

Answers (1)

Fawzan
Fawzan

Reputation: 4849

You cannot move the SVG by setting x, y in your case. The x, y attributes of SVG comes in handy when you want to nest a SVG inside another SVG. In that case you can move the child SVG by setting appropriate x,y values related to its parent.

If you really want to align the SVG in your case, you may have to use CSS to do that.

Read more here.

Upvotes: 4

Related Questions