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中嵌入HTML。如果这样做，您可以使用HTML布局功能水平和垂直居中文本。

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

<强>更新

我认为你遇到这么多麻烦的部分原因是alignment-baseline不是继承的。此外，浏览器似乎不同意如何呈现它。 IT通常适用于<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>

如何以不同的字体大小垂直和水平居中SVG文本

1 个答案: