CSS is not getting applied to SVG

Question

I have created a svg through D3 but CSS is not getting applied properly

I am looking for two svg one below the other so that i have given margin-left and margin-top but no luck

I am trying in chrome its not working but in fiddle the same is working

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="D3lib/d3.js"></script>
    <style type="text/css">
        .svg_class {
            margin-left:0px;margin-top:70px;background-color:green;
        }
        .svg_class1 {
            margin-left:0px;margin-top:0px;background-color:green;
        }
    </style> 
</head>
<body>

    <script type="text/javascript">

        // One way
        var width = 500,
            height = 50;

        var dataset = [5,10,15,20,25];

        var svg = d3.select("body")
                    .append("svg")
                    .attr("id","svg_1")
                    .attr("width",width)
                    .attr("height",height)
                    .attr("class","svg_class1");

        var circle = d3.select("#svg_1")
                        .selectAll("circle")
                        .data(dataset)
                        .enter()
                        .append("circle");  


        circle.attr("cx",function(d,i){
                    return (i * 50) + 25;
                })
                .attr("cy",height/2)
                .attr("r",function(d){
                    return d;
                });

        // Other way
        var w = 500, h = 50;

        var data = [5,10,15,20,25,30];

        d3.select("body")
            .append("svg")
            .attr("id","svg_2")
            .attr("width",w)
            .attr("height",h)
            .attr("class","svg_class");

        d3.select("#svg_2")
            .selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx",function(d,i){
                return (i * 50) + 25;
            })
            .attr("cy",h/2)
            .attr("r",function(d){
                return d;
            });


    </script>

</body>

here is fiddle link

can you share image of that. I am expecting one svg block under to other svg block not parallel to each other — Sandeep Patil, Jul 29 '16 at 10:52
That's what I see one block under the other, bother with a green background with some separation between the blocks. — Robert Longson, Jul 29 '16 at 10:53
which version you are using. i guess may be version support it is — Sandeep Patil, Jul 29 '16 at 11:00
I'm using Firefox 47. If the fiddle works then we're not going to be able to help you. You need to create something that actually shows your issue. — Robert Longson, Jul 29 '16 at 11:01
https://jsfiddle.net/vcuo9x4e/1/ this is working as I expected after making some divs but I wonder how its possible as I am also using 47.1 verison of firefox. — Sandeep Patil, Jul 29 '16 at 11:09
Am I the only one who is confused by this? *"I am trying in chrome its not working but in fiddle the same is working"* – that seems like apples and pears... Then again @RobertLongson is talking about FF 47... Could somebody please shed some light on this. Thankfully, it has a jquery tag on this one. — altocumulus, Jul 29 '16 at 12:15
@altocumulus may be he is trying in chrome but it didnt worked for him and working in fiddle. Why you are making fun here if you are not able to answer this question. As i also faced same issue sorted with giving **element.class** — , Jul 29 '16 at 12:21
@SohamShetty Don't get me wrong, I am not making fun of anybody! The only hint at what browser the author is actually using seems to be *Chrome*. At least, that's all we can derive from the question. And, apparently, *it* (what exactly, the fiddle?) is not working there. The fiddle, on the other hand, is working. But where, if not Chrome? Apples and pears. I am seriously confused when trying to dive into this. Like Robert Longson already mentioned will it be necessary to set up a [mcve] to reproduce the error. — altocumulus, Jul 29 '16 at 12:31
yeah i observed his fiddle he kept **position:relative** and that why its working but in question he don't have property **position:relative**. He himself got confused in this but it okay I can say looking at his points he is new here will learn while further stages — , Jul 29 '16 at 12:46

score 0 · Answer 1 · edited May 23 '17 at 12:01

Your SVGs are displaying inline (like an image). If you display:block them, they will stack and will acknowledge margin-top.

svg {
  display:block;
}

.svg_class {
  margin-left:0px;
  margin-top:100px;
  background-color:blue;
  position: relative;           
}
.svg_class1 {
  margin-left:0px;
  margin-top:0px;
  background-color:green;
  position: relative;
}

Here is a fiddle: https://jsfiddle.net/zw43esrh/1/

Edit: Check this out: https://stackoverflow.com/a/10324608/5385381

Especially this bit vertical margins will not have any effect on non-replaced inline elements

CSS is not getting applied to SVG

1 Answers1