Використання flexbox з текстом SVG та tspan-css, css3, svg, flexbox

Я намагаюся мати кілька двосмугових текстових слів, розташованих красиво, як показано нижче:

Я б хотів це зробити за допомогою flexbox, тому текст міг би охоплювати ту саму частку прямокутника, як би я не змінював його. Ось моя спроба:

.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

Як зрозуміло, текст просто розподіляється на себе, а не між ними рівномірно, як я сподівався, це станеться. Я йду це керівництво, але я не знаю, чи я просто не розумію, як це працює, або якщо є деякі обмеження, коли мова заходить про його використання text/tspan.

Як я можу використати CSS для простору цих SVG text теги рівномірно над лівою половиною прямокутника?

Відповіді:

дисплей: flex не впливає на вміст SVG. дисплей ніхто не означає, що будь-яке інше значення, ніж ніхто не розглядається ідентично.