如何垂直和水平中心SVG文本具有不同的字体大小

Question

我有一个组件来表示标签标题，如以下内容：

import Svg, { G, Path } from 'react-native-svg';
const Tab = ({ height = "57.8", width="104", children, fill='#D1D3D4' }) => (
  <Svg height={height} width={width} viewBox="0 0 104 57.8">
    <G>
      <Path d="M-0.1,57.8h85c19.1,0,19.5-13.9,19.1-17.9L97.8,0H0.1L-0.1,57.8z" fill={fill}/>
      { children }
    </G>
  </Svg>
)

孩子将是SVG文本，将具有多个文本段，其字体大小要相互对齐。此文本还需要垂直和水平为中心。

我尝试了不同的事情，但是我似乎找不到正确的配置。这是我的最新内容，将内部文本基线与其父母的中心相关。

import { Text, TSpan } from 'react-native-svg';
...
return (<Tab><Text x={52} y={28.9} textAnchor={'middle'} alignmentBaseline={'central'}>
  <TSpan alignmentBaseline={"baseline"}>
    <TSpan fontSize={44}>{text.charAt(0)}</TSpan>
    <TSpan fontSize={32}>{text.substring(1)}</TSpan>
  </TSpan>
</Text></Tab>)

任何帮助都非常感谢。

Answer 1

svg没有自动布局功能。您需要使用x和y属性和/或transform属性来定位文本。

但是，您可以使用<foreignObject>元素将HTML嵌入SVG中。如果这样做，则可以使用HTMLS布局功能水平和垂直居中文本。

您可以在此网站上找到如何使用<foreignObject>的示例。

update

我认为您遇到这么多麻烦的部分原因是alignment-baseline没有继承。同样，浏览器似乎并不同意如何渲染它。它通常可用于<text>元素，但是当您将其放在<tspan>元素上时，事情变得更加混乱。

我建议使用dy="Xem"技术。它在每个浏览器上都相同。

<svg width="104" height="57.8" viewBox="0 0 104 57.8">
  <line x1="0" y1="28.9" x2="104" y2="28.9" stroke="red" stroke-width="1"/>
  <text x="52" y="28.9" dy="0.35em" font-size="44" text-anchor="middle">
    <tspan>T</tspan><tspan font-size="32">ext</tspan>
  </text>
</svg>