使用带有SVG文本和tspan的flexbox

Question

我试图将多个双行文本框放置得很好，如下所示：

我想用flexbox这样做，所以无论我如何调整大小，文本都会覆盖矩形的相同比例。这是我的尝试：

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

正如可以看到的那样，文本只是在自身上，而不是像我希望的那样均匀分布。我正在关注this guide，但我不确定我是否只是不了解这个灵活的东西是如何工作的，或者在使用{{{}时是否有一些限制1}} / text。

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

Answer 1

display：flex对SVG内容没有影响。 display无意味着不渲染，任何其他值都不会被视为相同。