CODEWITHSUNDEEP
htmlcssfirefoxsvgd3.js
Bilbo Baggins
Bilbo Baggins

Reputation: 95

SVG not working in Firefox 18

SVG is not working in Firefox 18, but it would be more accurate to say via Firebug. I can see the values of the SVG elements changing - but nothing appears on the screen.

The snippet I'm working with is http://jsfiddle.net/jcutrell/3C9JW/5/.

Here is the code:

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

It works perfectly fine in Chrome though.

Upvotes: 2

Views: 1053

Answers (3)

user3172663
user3172663

Reputation: 312

Simple add to the CSS:

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

Or add to the HTML:

style width=500px, height=300px

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124229

To see things, you need the width and height attributes on the SVG element. And width and height CSS properties on the html and body tags:

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

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

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

Upvotes: 1

epascarello
epascarello

Reputation: 207547

You need to set a height and width of the svg element, then it will show up.

Upvotes: 4

Related Questions