Question

djvanderlaan的d3.js Planetarium首先在SVG区域的中心定义一个“太阳”圆圈：

svg.append("circle").attr("r", 20).attr("cx", w/2)
.attr("cy", h/2).attr("class", "sun")

然后定义围绕太阳的两个轨道（为了清楚起见，代码稍微重新排列）：

var planets = [
    { R: 300, r:  5, speed: 5, phi0: 90},
    { R: 150, r: 10, speed: 2, phi0: 190}
];

var container = svg.append("g")
  .attr("transform", "translate(" + w/2 + "," + h/2 + ")")

container.selectAll("g.planet").data(planets).enter().append("g")
  .attr("class", "planet")
  .each(function(d, i) {

     d3.select(this).append("circle").attr("class", "orbit")
          .attr("r", d.R)

     d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
          .attr("cy", 0).attr("class", "planet");

  });

每组中的第一个圆圈 - “轨道”圆圈 - 永远不会被赋予中心坐标cx和cy。这不仅仅是在源代码中;我在三个浏览器中查看了检查员中的“轨道”圆圈，并且轨道圆圈没有cx或cy。然而，这些圆以SVG区域的中心为中心，即在x = w / 2，y = h / 2时。浏览器如何知道放置这些圈子的位置？它是否从封闭的cx元素继承cy和g？从“太阳”？

Answer 1

是的，所有svg元素都继承了父svg：g元素的变换和比例。您可以使用它来设置本地中心，如此处所做，或者使用缩放和精确旋转进行播放（因为使用transform属性设置所有这些有时会导致意外结果）。

通常，人们将他们的圆形元素放在父g中并定位g而不设置cx / cy，因为圆圈默认以其父级的中心为中心。 svg：rect元素不是这种情况，必须将它们偏移到“居中”它们。

缺少中心坐标的SVG圆的放置

1 个答案: