缺少中心坐标的SVG圆的放置 [英] Placement of SVG circle that lacks center coordinates

问题描述

djvanderlaan的d3.js Planetarium 首先在SVG中心定义了一个太阳"圆区域:

djvanderlaan's d3.js Planetarium first defines a "sun" circle at the center of the SVG area:

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

，然后定义围绕太阳的两个轨道(此处为了清晰起见，对代码进行了稍微重新排列):

and then defines two orbits around the sun (with code slightly rearranged for clarity here):

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.浏览器如何知道这些圆圈的放置位置?它是否从封闭的g元素继承cx和cy?从太阳"开始?

The first circle in each group--the "orbit" circle--is never given center coordinates cx and cy. That's not just in the source code; I looked at the "orbit" circles in the inspectors in three browsers, and there is no cx or cy for the orbit circles. However, these circles are centered on the center of the SVG area, i.e. on x=w/2, y=h/2. How does the browser know where to place these circles? Does it inherit cx and cy from the enclosing g element? From the "sun"?

推荐答案

是的，所有svg元素都继承其父级svg:g元素的变换和缩放.您可以使用它来设置局部中心，如此处所做的那样，或者以比例缩放的方式玩耍并以极高的精度旋转(因为使用transform属性设置所有这些有时可能会导致意外的结果).

Yes, all svg elements inherit the transform and scale of their parent svg:g elements. You can use this to set a local center, as done here, or to play with scale and rotate with fine precision (since setting these all with the transform attribute can sometimes lead to unexpected results).

通常，人们将圆元素放置在父级g内，而无需设置cx/cy来定位g，因为圆默认情况下以其父级的中心为中心. svg:rect元素不是这种情况，必须将其偏移以使其居中".

Often, people place their circle elements inside a parent g and position the g without ever setting cx/cy because a circle defaults to centering on the center of its parent. This isn't the case with svg:rect elements, which have to be offset to "center" them.

这篇关于缺少中心坐标的SVG圆的放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！