Html SVG在Firefox 18中不工作_Html_Css_Firefox_Svg_D3.js

Html SVG在Firefox 18中不工作

html css firefox svg d3.js

Html SVG在Firefox 18中不工作,html,css,firefox,svg,d3.js,Html,Css,Firefox,Svg,D3.js,SVG在Firefox18中不起作用，但更准确地说是通过。我可以看到SVG元素的值在变化，但屏幕上什么也没有显示我正在处理的代码片段是代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo by

SVG在Firefox18中不起作用，但更准确地说是通过。我可以看到SVG元素的值在变化，但屏幕上什么也没有显示

我正在处理的代码片段是

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> - jsFiddle demo by jcutrell</title>

        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <style type="text/css"></style>

        <style type="text/css">
            body {
                background-color: #555;
                height: 5000px;
            }
        </style>

        <script type="text/javascript">//<![CDATA[
            $(function(){
                var svg = d3.select("#main");
                var line = d3.svg.line()
                .x(function(d) { return d[0]; })
                .y(function(d) { return d[1] + 200; })
                .interpolate("monotone");

                function init(){
                    var randData = [];
                    for (var i = 0; i < 8; i++){
                        randData.push([i*50, Math.random() * 100]);
                    }
                    svg.data([randData])
                       .append("svg:path")
                       .attr("d", line)
                       .attr("fill", "#444")
                       .attr("stroke", "#aaa")
                       .attr("stroke-width", 7);
                    svg.selectAll("circle")
                       .data(randData)
                       .enter().append("circle")
                       .attr("cx", function(d,i){ return d[0]; })
                       .attr("cy", function(d,i){ return d[1] + 200 })
                       .attr("fill", "#dfdfdf")
                       .attr("r", 10);
                    setInterval(refresh, 1200);
                }

                function refresh(){
                    var randData = [];
                    for (var i = 0; i < 8; i++){
                        randData.push([i*50, Math.random() * 100]);
                    }

                    svg.data([randData])
                        .select("path")
                        .transition()
                        .duration(500)
                        .attr("d", line);
                    svg.selectAll("circle")
                        .data(randData)
                        .transition()
                        .duration(500)
                        .attr("cy", function(d,i){ return d[1] + 200 });
                }
                init();
            });
        </script>
    </head>
    <body>
        <script src="http://d3js.org/d3.v2.js"></script>
        <svg id="main"></svg>
    </body>
</html>


-jctrell的jsFiddle演示
身体{
背景色：#555；
高度：5000px；
}
//

不过，它在Chrome中工作得非常好。

您需要设置svg元素的高度和宽度，然后它就会显示出来

到，您需要SVG元素上的

宽度

和

高度

属性。以及

html

和

body

标记上的

width

和

height

CSS属性：

<svg id="main" width="100%" height="100%"></svg>

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #555;
    width: 100%;
    height: 100%;
}


html{
宽度：100%；
身高：100%；
}
身体{
背景色：#555；
宽度：100%；
身高：100%；
}

简单添加到CSS：

#main{
    width: 500px;
    height: 300px;
}

或添加到HTML：

style width=500px, height=300px

非常感谢：）你是个救命恩人！！在设置高度和宽度属性时，我还需要将

'px'

添加到整数中