d3 objects do not render within svg bounds on IE10

问题

As shown in the image, a circle drawn with center at 0,0 displays correctly on chrome, but on IE10 it overflows the SVG bounds. What do I need to do to get this to render correctly on IE?

Here is the code:

<body>
  <div id="chart1">
  </div>
    <script>
      var width = 50,height = 50;
      var SVGmap = d3.select("#chart1")
                      .append("svg")
                      .attr("width", width)
                      .attr("height", height);

      var g = SVGmap.append("g");
      g.append("circle") 
        .style("stroke", "gray")
        .style("fill", "red")
        .attr("r", 40)
        .attr("cx", 0)
        .attr("cy", 0)

    </script> 
</body>

回答1:

Thanks Robert. Adding .attr("overflow", "hidden") to the SVG Element solves this.

来源：https://stackoverflow.com/questions/16176500/d3-objects-do-not-render-within-svg-bounds-on-ie10

标签

svg

d3.js

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!