居中对齐图例文本和圆圈

Question

我需要为我的图表绘制一个水平图例，但不确定如何将其居中对齐以及保持彼此之间的距离相同。

我可以为包含的每个项目绘制组

<g class="legend">
    <g class="item">
        <circle r="2" ... />
        <text>passed</text>
    </g>
    ...
</g>

由于文本具有动态宽度，我如何定位它使其具有相同的距离，即红线 以及 svg 中心的整个 g.legend，即蓝线。

...

Answer 1

.legend{ /* Container (You can use text-align: center instead of flex in you want) */
  display: flex;
  justify-content:center;
}

.legend::before{ /* The line */
  display: block;
  border-bottom: 2px solid gray;
  left: 0;
  top: calc( 1rem + 2px ); /* Line height + Border thickness */
  position: absolute;
  width: 100%;
  content: '';
}

.legend div{ /* Each legend item */
  margin: 0 10px;
  padding: 2px;
  display: inline-block;
  background: white;
  z-index: 1;
}

<div class="legend">
  <div>• Legend 1</div>
  <div>• Legend 2</div>
  <div>• Legend 3</div>
</div>

您可以使用 CSS ::before 伪选择器来实现此目的。如果您有任何疑问，请发表评论。我不能