CSS 文本对齐覆盖 xy

Question

我确实在对齐 rec 标签中的文本时遇到问题。遵循代码和两张描述案例的图片。

HTML:

<g class="v-label v-morphable-label viz-axis-label v-axis-item index_0" fill="#333333" font-size="10px" font-weight="normal" font-family="'72-Web',Arial,Helvetica,sans-serif" font-style="normal" categorylabel-id="0" transform="translate(0,0)">
<rect class="viz-axis-label-rect" fill="transparent" x="1" y="1" width="161.85644531" height="12.475">
</rect>
<g class="v-axis-label-wrapper">
<g>
<text x="129.52148437" y="11.2375">DACH</text>
</g>
</g>
</g>

我确实想将文本左对齐到 rect-tag 的开头。附件是来自 Debug模式的图片，以查看哪个元素有多长以及它们如何相互适应。我用 transform:translate(-5%, -0%) 试过了。哪个有效，但它不会对齐它们仍然居中的文本，但我至少可以阅读它。更好的是文本也将左对齐。我将不胜感激任何提示。 text tag rect tag

Answer 1

我不太确定你要的是什么。

您是否希望文本位于 rect 标签的内部并左对齐？像这样？

.viz-axis-label-rect {
  background-color: yellow;
  display: block;
  width: 100%;
}

g text {
  text-align: left;
}

<g class="v-label v-morphable-label viz-axis-label v-axis-item index_0" fill="#333333" font-size="10px" font-weight="normal" font-family="'72-Web',Arial,Helvetica,sans-serif" font-style="normal" categorylabel-id="0" transform="translate(0,0)">
  <rect class="viz-axis-label-rect" fill="transparent" x="1" y="1" width="161.85644531" height="12.475" style=" width: 100%; display: block;">
    <g class="v-axis-label-wrapper">
      <g>
        <text x="129.52148437" y="11.2375">DACH</text>
      </g>
    </g>
  </rect>
</g>