为什么 D3 缩放功能在 Safari 中不起作用？

Question

当尝试将 D3 缩放应用于 svg 时，它适用于 Chrome 浏览器，但不适用于 Safari，是否有可用于此的修复/解决方法 Code Pen

(function(){


 d3.select('.container')
   .append('svg')
     .attr('width',500)
     .attr('height',500)
     .attr('x',20)
     .attr('y',20)
     .attr('class','svg')
     .style('background-color','blue');

 d3.select('.svg')
   .append('circle')
     .attr('cx',250)
     .attr('cy',250)
     .style('fill','green')
     .attr('r',50);

 var zoom = d3.zoom()
   .scaleExtent([1, 100])
   .translateExtent([[0,0], [1000, 1000]])
   .extent([[0, 0], [200,200]])
   .on("zoom", zoomed);

 d3.select('.svg').call(zoom);

 function zoomed(){
   var transform = d3.event.transform;
   d3.select('.svg')
     .attr('transform',`translate(${transform.x},${transform.y}) scale(${transform.k})`)
 }

})()

Answer 1

According to this SO post，Safari 不支持 <svg> 元素上的 transform 属性。 Robert Longson 建议附加一个 g 元素，并将转换应用于该元素，我在下面完成了。

const svg = d3.select('.container')
  .append('svg')
    .attr('class','.svg')
    .attr('width',500)
    .attr('height',500)
    .style('background-color','blue');

const g = svg.append('g')
    .attr('class', 'g')

g.append('circle')
    .attr('cx',250)
    .attr('cy',250)
    .style('fill','green')
    .attr('r',50);

var zoom = d3.zoom()
    .scaleExtent([1, 100])
    .translateExtent([[0,0], [1000, 1000]])
    .extent([[0, 0], [200,200]])
    .on("zoom", function zoomed(){
      g.attr('transform', d3.event.transform);
    });

svg.call(zoom);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container"></div>