使用带有SVG文本和tspan的柔性盒

Question

我试图让多个两行文本框很好地定位，如下所示：

​

​

我想用一个柔性盒来完成这个任务，所以无论我如何调整它的大小，文本都会覆盖同样比例的矩形。以下是我的尝试：

​

.words text {
  dominant-baseline: text-before-edge;
  flex: 1 0 auto;
  box-sizing: border-box;
}
.words {
  display: flex;
  justify-content: space-around;
  width: 50%;
}
rect {
  fill: rgba(255, 0, 0, 0.1);
}

<svg>
  <rect width="300" height="100"></rect>
  <g class="words">
    <text>
      <tspan x="0" y="0">Text</tspan>
      <tspan x="0" y="1.5em">One</tspan>
    </text>
    <text>
      <tspan x="0" y="0">Text</tspan>
      <tspan x="0" y="1.5em">Two</tspan>
    </text>
    <text>
      <tspan x="0" y="0">Text</tspan>
      <tspan x="0" y="1.5em">Three</tspan>
    </text>
  </g>
</svg>

​

JSFiddle

显而易见的是，文本本身只是在堆积，而不是像我所希望的那样均匀地间隔。我正在跟踪本指南，但我不确定我是否只是不了解这些flex是如何工作的，或者在与text/tspan一起使用它时是否存在一些限制。

如何使用CSS将这些SVG text标记均匀地放置在矩形的左半部分？

Answer 1

显示:flex对SVG内容没有影响。显示 none的意思是不呈现，除none以外的任何其他值都是相同的。