CODEWITHSUNDEEP
javascriptcssgoogle-chromesvgd3.js
Thomas Jeffries
Thomas Jeffries

Reputation: 35

d3 Nested SVG plots differently in firefox than in Chrome

I've seen versions of this question but they haven't helped me to solve this issue. I am using d3 with a nested svg, here is the code:

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

var nestedSVG = svg.append('svg') 
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

The nestedSVG makes an inner height/width so that some plots get cutoff appropriately. This works perfectly in firefox, but not in Chrome. When I scroll over nestedSVG in firebug it shows the appropriate dimensions, but when I scroll over nestedSVG in javascript console in chrome the dimensions are altered. This results in the plots being different. Any clue as to why this is happening?

Upvotes: 2

Views: 763

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

The ability to set a transform on an <svg> element is new in SVG 2 and is not yet widely supported. Firefox does support it, IE does not currently, not sure about other UAs.

Upvotes: 2

Related Questions