svg-旋转＆lt; text＆gt;与＆lt; rect＆gt;

Question

我正在为D3写一个传奇。从左到右绘制的十个矩形。我想要的结果是将文本放置在其相关单元格上方，垂直放置，但与右侧略微角度。我已经应用了旋转，但是我缺少一些东西，因为它将它们作为一个组并将它们全部旋转为一条线，而不是相对于他们的兄弟姐妹单元旋转。

有人可以推荐一些属性或样式提示，或者可能会分组元素的不同方式，以便文本元素在自己的中心周围单独旋转，而不是单行旋转？

这是我的代码的当前状态：

    <svg preserveAspectRatio="xMinYMin meet" viewBox={`0 0 800 70`}>
      <g transform={`translate(${[dms.marginTop, dms.marginLeft].join(',')})`}>
        <g>
          {range(10).map((d) => (
            <>
              <rect
                key={`${d}_legendCell`}
                width={cellSize - 1.5}
                height={cellSize - 1.5}
                fill={colorScale(Number(legendBands(String(d))) + interval)}
                x={d * cellSize}
              ></rect>
              <text
                key={`${d}_legendLabel`}
                fontWeight="300"
                fontSize="12"
                width="100"
                y={cellSize * d}
                transform="rotate(290)"
                dy=".85rem"
              >
                {Number(legendBands(String(d))).toFixed(1)}
              </text>
            </>
          ))}
        </g>
      </g>
    </svg>

tia！

Answer 1

如果我正确读取您的代码，您当前正在对齐＆lt; text＆gt; eylements并垂直旋转 - 更好地使用水平偏移量

，可以将标签元素与特定x一起放置。相对于您当前的RECT中心进行协调。

示例第二个单元格

  <rect x="10" y="0" width="10" height="10" fill="magenta"/>
  <text x="15" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 15, 5)">02</text>

文本元素的X值（15）是当前单元格/rect的中心点。
主导baseline =“ Central”和text-andor =“中间”只是简化了相对于先前的＆lt; rect＆gt; 。
我们将此X值复制到转换：

transform="rotate(-45, 15, 5)"

这样，我们确保标签围绕RECT中心旋转。
另外，考虑到某些浏览器仍然存在transform-origin和transform-b​​ox（尤其是Safari的某些版本）

静态SVG示例

的问题，此方法仍然很健壮。

svg {
  display: block;
  border: 1px solid #ccc;
}

text {
  font-size: 5px
}

<svg width="50%" viewBox="0 0 30 10">
  <rect x="0" y="0" width="10" height="10" fill="green"/>
  <text x="5" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 5, 5)">01</text>
  
  <rect x="10" y="0" width="10" height="10" fill="magenta"/>
  <text x="15" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 15, 5)">02</text>
  
  <rect x="20" y="0" width="10" height="10" fill="cyan"/>
  <text x="25" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 25, 5)">03</text>
</svg>

<p>Add gaps</p>
<svg width="50%" viewBox="0 0 32 10">
  <rect x="0" y="0" width="10" height="10" fill="green"/>
  <text x="5" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 5, 5)">01</text>
  
  <rect x="11" y="0" width="10" height="10" fill="magenta"/>
  <text x="16" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 16, 5)">02</text>
  
  <rect x="22" y="0" width="10" height="10" fill="cyan"/>
  <text x="27" y="5" width="10" dominant-baseline="central" text-anchor="middle" transform="rotate(-45, 27, 5)">03</text>

</svg>