能否使用symbol和use标签在preserveAspectRatio为none的SVG中保持文字宽高比

问题根源分析 #

你遇到的显示异常由三个核心问题共同导致：

• <symbol>内部的<text>缺少必要的定位和字体配置：仅设置text-anchor="middle"的情况下，文本默认x、y坐标为0，文本基线对齐y=0，大部分字符会超出symbol的viewBox上边界被裁剪，自然看不到完整内容。
• 主SVG坐标系和你设置的<use>固定宽高不匹配：你的主SVG viewBox宽度可达10000，对应实际渲染像素如果是1000px的话，1个SVG单位仅对应0.1px，你设置的225宽度实际渲染出来只有22.5px，50高度仅5px，自然缩成小点。
• 现有方案无法避免文本变形：symbol本身的preserveAspectRatio仅控制内容在<use>定义的矩形内的适配，这个矩形本身还是会跟着主SVG的preserveAspectRatio="none"做非等比缩放，最终文本还是会被拉伸变形。

修复方案 #

第一步：修复基础显示问题 #

先完善<symbol>的内部配置，保证文本正常渲染：

<svg width="0" height="0">
   <symbol id="label" width="225" height="50" viewBox="0 0 225 50">
      <!-- 增加x、y定位和字体大小，让文本在symbol内居中显示 -->
      <text text-anchor="middle" x="112.5" y="35" font-size="24">Label Text</text>
   </symbol>
</svg>

再动态计算<use>的宽高，适配主SVG坐标系：
假设你想要标签实际渲染为225px宽、50px高，先获取主SVG的实际渲染像素宽mainW_px、高mainH_px，再结合主SVG的viewBox宽mainW_vb、高mainH_vb做换算：

const useWidth = 225 * mainW_vb / mainW_px;
const useHeight = 50 * mainH_vb / mainH_px;

把计算出来的useWidth和useHeight赋值给<use>的width、height属性即可，标签就不会缩成小点。

第二步：实现文本不变形 #

如果要完全避免文本被主SVG的非等比缩放拉伸，推荐放弃<symbol>+<use>的方案，改用<foreignObject>包裹独立SVG标签：

<svg id="user_selection" width="100%" height="100%"
   viewBox="${rtVB['min-x']} ${rtVB['min-y']} ${rtVB.width} ${rtVB.height}"
   preserveAspectRatio="none">
   <!-- 原有渲染元素 -->
   <foreignObject x="${xloc}" y="${yloc}" width="${useWidth}" height="${useHeight}">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 225 50">
         <text text-anchor="middle" x="112.5" y="35" font-size="24">Label Text</text>
      </svg>
   </foreignObject>
</svg>

<foreignObject>内部的SVG会独立渲染，完全不受父SVG非等比缩放的影响，文本可以保持正常比例显示。

内容的提问来源于stack exchange，提问作者Peter Du