CSS不獲取應用到SVG

-1

我已經創建了一個SVG通過D3，但CSS是爲了讓我給利潤率左和邊距沒有得到正確應用CSS不獲取應用到SVG

我找了兩個SVG一個低於其他但沒有運氣

我試圖在鉻它不工作，但在小提琴一樣工作

<!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>

這裏是fiddle鏈接

來源

2016-07-29 Sandeep Patil

似乎在Firefox上對我的工作確定。 –

你能分享一下嗎？我期待其他svg塊下的一個svg塊不相互平行 –

這就是我看到另一個塊下的一個塊，打擾與塊之間的一些分離的綠色背景。 –

您的SVG顯示inline（如圖像）。如果你display:block他們，他們將堆疊並承認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; 
}

這裏是一個小提琴：https://jsfiddle.net/zw43esrh/1/

編輯：檢查了這一點：https://stackoverflow.com/a/10324608/5385381

特別是該位vertical margins will not have any effect on non-replaced inline elements

來源

2016-07-29 12:50:04 ksav

CSS不獲取應用到SVG

回答

相關問題