SVG rotate issue on iOS

[dkrasne]

I don't know if this is an iOS bug or an Observable Framework bug, so I'll just put it as a Q&A. I'd been testing my work on Windows and Android, since those are what I use, and everything was fine, but I just looked on an iOS device, and using .attr("transform", "rotate(90,0,0)") on the outer SVG component of a d3.create("svg") turned out to be having no effect in either Safari or Chrome. I wrapped everything in the SVG in an outer <g> and put the rotate on that, and it worked (although I had to change the translate substantially from what it had been). Is this a known issue with modern browsers, or is it me not understanding how the SVG component works?

Here's the code; the commented out bits are the bits of my original code that I changed/replaced, and the second constant is the new addition to fix the problem.

//  const svg = d3
const svg_outer = d3
    .create("svg")
    .attr("width", width)
    .attr("height", width)
    .attr("viewBox", [0, 0, width, width])
    .attr("style", "max-width: 100%; height: auto; height: intrinsic")
//    .attr("transform", "rotate(90,0,0) translate("+marginTop+",0)")
    ;

  const svg = svg_outer.append("g")
    .attr("transform", "rotate(90,0,0) translate(0,-"+(width*.75 + marginTop)+")")
    .attr("id","outer_group")