如何解决iOS端HTML <svg>中<text>内容溢出被截断的问题

我太懂你这种iOS Safari专属bug的痛苦了——明明在其他浏览器都好好的，偏偏苹果家的设备就给你截断文本，尤其是斜体和重音符号这种容易超出常规边界的内容。结合你提供的代码和试过的方案，我给你几个针对性的解决办法，应该能彻底搞定这个问题：

1. 给SVG的viewBox添加额外缓冲空间（核心修复） #

iOS Safari对SVG文本的边界计算特别严格，尤其是带stroke、斜体或者重音符号的文本，它不会像其他浏览器那样自动扩展边界。你之前试过加大viewBox，但可能只是单纯加宽加高，不如直接给viewBox设置负的起始坐标，给文本四周留足缓冲：

修改你的SVG viewBox属性：

viewBox={`-30 -30 ${width + 60} ${height + 60}`}

这里的-30相当于给文本上下左右各加了30px的空白区域，足够容纳斜体的延伸部分和重音符号。你可以根据实际字体大小调整这个数值，比如字体越大，缓冲值可以设到50px。

同时别忘了给SVG加上preserveAspectRatio="xMidYMid meet"，确保缩放时不会意外裁剪内容：

<svg
  overflow={'visible'}
  width={width}
  height={height}
  viewBox={`-30 -30 ${width + 60} ${height + 60}`}
  preserveAspectRatio="xMidYMid meet"
  style={{ display: "block" }}
  className={cn("maw-w-[500px] px-2 lg:maw-w-[700px] max-lg:v", className)}
>

2. 修正文本的Y轴定位，避免stroke导致的偏移 #

你当前的Y轴计算是parseFloat(height as string) / 2 + strokeWidth / 2，结合dominantBaseline='central'可能在iOS上出现定位偏差。建议改用dominantBaseline="middle"，并通过dy属性来补偿stroke的宽度，这样文本居中更准确：

<text
  x={textX}
  y={parseFloat(height as string) / 2}
  dominantBaseline='middle'
  dy={`${strokeWidth / 2}px`}
  // 其他属性保持不变
>
  {children}
</text>

dy会让文本在Y轴方向上微调，刚好抵消stroke宽度带来的视觉偏移，确保文本完全在SVG的可视范围内。

3. 解决字体大小的冲突问题 #

我注意到你的组件里，text元素的className包含了text-[3.25rem]这类CSS字体大小设置，同时你又在Usage里传了fontSize={80}的prop。SVG的fontSize属性优先级低于CSS的font-size，这会导致实际字体大小和你预期的不一致，进而引发截断。

解决办法是统一用CSS变量或者SVG属性来控制字体大小，比如去掉className里的字体大小类，改用SVG的fontSize属性：

<text
  fontSize={fontSize || "3.25rem"}
  // 移除className里的text-[3.25rem]等字体大小相关类
  className={cn("uppercase pr-4 max-[350px]:leading-none md:leading-none lg:leading-none")}
>

4. 给文本添加iOS专属的渲染优化 #

iOS Safari的字体渲染引擎和其他浏览器有差异，添加几个CSS属性可以改善边界计算：

在text元素的style里加入：

style={{
  overflow: 'visible',
  paintOrder: "stroke",
  WebkitFontSmoothing: "antialiased",
  fontFeatureSettings: '"liga" 0'
}}

这些属性可以让字体渲染更精准，减少因连字或抗锯齿导致的边界计算误差。

5. 确保SVG的高度足够容纳文本 #

你在Usage里设置的height={60}但fontSize={80}，这明显文本的实际高度远大于SVG的高度。即使设置了overflow="visible"，iOS Safari可能还是会基于viewBox的高度来裁剪内容。建议把SVG的height设置为字体大小 + stroke宽度*2 + 40px缓冲，比如fontSize=80、strokeWidth=1.2的话，height至少设为120：

<FeaturedTextSVG
  width={600}
  height={120} // 从60改成120
  fontSize={80}
  strokeWidth={1.2}
  // 其他属性不变
>
  para ser!
</FeaturedTextSVG>

把这些修改组合起来，应该就能彻底解决iOS Safari上的文本截断问题了。我之前遇到过类似的斜体SVG文本截断问题，用这些方法完美解决了。

备注：内容来源于stack exchange，提问作者Davi Mattos