Question

SVG在Firefox 18中不起作用，但通过Firebug说出更准确。我可以看到SVG元素的值发生了变化 - 但屏幕上没有任何内容。

我正在使用的代码段为http://jsfiddle.net/jcutrell/3C9JW/5/。

以下是代码：

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

但它在Chrome中运行得非常好。

Answer 1

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

Answer 2

要see things，您需要SVG元素上的width和height属性。 width和height代码上的html和body CSS属性：

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

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

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

Answer 3

简单添加到CSS：

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

或添加到HTML：

style width=500px, height=300px

SVG无法在Firefox 18中运行

3 个答案: