SVG Path尺寸与位置异常：嵌入SVG无法按预期调整大小与定位

我正在生成SVG文档，使用库从LaTeX生成SVG。相关SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500px" height="300px" id="svgSurface">
   <svg viewBox="0 -883.9 1186.6 883.9" x="0" y="0" width="100">
      <defs>
         <path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
         <path id="MJX-1-TEX-N-48" d="M128 622Q121 629 117 631T101 634T58 637H25V683H36Q57 680 180 680Q315 680 324 683H335V637H302Q262 636 251 634T233 622L232 500V378H517V622Q510 629 506 631T490 634T447 637H414V683H425Q446 680 569 680Q704 680 713 683H724V637H691Q651 636 640 634T622 622V61Q628 51 639 49T691 46H724V0H713Q692 3 569 3Q434 3 425 0H414V46H447Q489 47 498 49T517 61V332H232V197L233 61Q239 51 250 49T302 46H335V0H324Q303 3 180 3Q45 3 36 0H25V46H58Q100 47 109 49T128 61V622Z"></path>
      </defs>
      <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1,0,0,-1,0,0)">
         <g data-mml-node="math">
            <g data-mml-node="msup">
               <g data-mml-node="mi"></g>
               <g data-mml-node="TeXAtom" transform="translate(33,413) scale(0.707)" data-mjx-texclass="ORD">
                  <g data-mml-node="mn">
                     <use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use>
                  </g>
               </g>
            </g>
            <g data-mml-node="mtext" transform="translate(436.6,0)">
               <use data-c="48" xlink:href="#MJX-1-TEX-N-48"></use>
            </g>
         </g>
      </g>
   </svg>
</svg>

该SVG通过<use>引用<defs>中的<path>元素。调整内部嵌入SVG的大小与位置时遇到以下问题：

• 设置x、y属性完全无效
• 设置width为100后，实际显示尺寸约为90，且高度自动变化
• 怀疑内部<g>元素的变换影响了容器尺寸

需求：内部嵌入SVG的内容能严格按照x、y、width属性调整大小与定位。

1. 核心问题分析 #

• x/y无效：内部SVG默认的preserveAspectRatio（保持宽高比）规则会覆盖定位设置，导致x、y不生效
• 尺寸偏差：viewBox宽高比与设置的width不匹配时，默认规则会自动缩放内容并保留空白边距，导致实际显示尺寸小于设置值
• 内部<g>的matrix变换是LaTeX转SVG库生成的垂直翻转，用于修正坐标系，不会影响容器尺寸，无需移除

2. 具体修改方案 #

步骤1：添加preserveAspectRatio属性

给内部SVG添加preserveAspectRatio="xMinYMin meet"，确保内容从左上角开始排列，同时保持宽高比，避免空白边距导致的尺寸偏差。

步骤2：明确设置height值

如果需要固定高度，直接指定；如果要按比例计算，可设为auto，SVG会根据viewBox和width自动计算高度。

步骤3：调整x/y属性

此时设置x、y即可精准控制内部SVG的位置。

3. 修改后的代码示例 #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500px" height="300px" id="svgSurface">
   <!-- 新增preserveAspectRatio，明确width/height，设置x/y -->
   <svg viewBox="0 -883.9 1186.6 883.9" x="50" y="50" width="200" height="auto" preserveAspectRatio="xMinYMin meet">
      <defs>
         <path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
         <path id="MJX-1-TEX-N-48" d="M128 622Q121 629 117 631T101 634T58 637H25V683H36Q57 680 180 680Q315 680 324 683H335V637H302Q262 636 251 634T233 622L232 500V378H517V622Q510 629 506 631T490 634T447 637H414V683H425Q446 680 569 680Q704 680 713 683H724V637H691Q651 636 640 634T622 622V61Q628 51 639 49T691 46H724V0H713Q692 3 569 3Q434 3 425 0H414V46H447Q489 47 498 49T517 61V332H232V197L233 61Q239 51 250 49T302 46H335V0H324Q303 3 180 3Q45 3 36 0H25V46H58Q100 47 109 49T128 61V622Z"></path>
      </defs>
      <!-- 保留原有垂直翻转变换，确保内容正确显示 -->
      <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1,0,0,-1,0,0)">
         <g data-mml-node="math">
            <g data-mml-node="msup">
               <g data-mml-node="mi"></g>
               <g data-mml-node="TeXAtom" transform="translate(33,413) scale(0.707)" data-mjx-texclass="ORD">
                  <g data-mml-node="mn">
                     <use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use>
                  </g>
               </g>
            </g>
            <g data-mml-node="mtext" transform="translate(436.6,0)">
               <use data-c="48" xlink:href="#MJX-1-TEX-N-48"></use>
            </g>
         </g>
      </g>
   </svg>
</svg>

额外说明 #

如果不需要保持宽高比，可将preserveAspectRatio设为none，此时内容会强制拉伸以填满设置的width和height，但可能导致LaTeX生成的图形变形，按需选择即可。

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