如何在SVG路径中实现SVG文本左对齐？

你遇到的问题根源在于SVG默认的显示规则——preserveAspectRatio属性默认值为xMidYMid meet，这会让缩放后的图形在SVG容器视口中水平垂直都居中。text-align对SVG路径图形完全无效，translate()没生效大概率是没找对调整对象。

具体解决方案 #

直接在引用Symbol的<svg>标签里添加preserveAspectRatio属性，根据需求选择对应值：

• 水平左对齐+垂直顶部对齐：用xMinYMin meet
• 水平左对齐+垂直居中：用xMinYMid meet
• 水平居中+垂直顶部对齐：用xMidYMin meet

修改后的代码示例：

<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 150.2 71" id="3a63">
    <path fill-rule="evenodd" d="m38 70-4.7-16.3H11.1L6.5 70H0L20.5 0h3.3l20.6 70H38Zm77.5 1h-4a14.4 14.4 0 0 1-5.7-1.2 14.8 14.8 0 0 1-4.7-3.1q-2-2-3.1-4.7a14.4 14.4 0 0 1-1.2-5.7V33.7A14.4 14.4 0 0 1 98 28a14.8 14.8 0 0 1 3.1-4.7q2-2 4.7-3.1a14.4 14.4 0 0 1 5.7-1.2h4a14.4 14.4 0 0 1 5.7 1.2 14.8 14.8 0 0 1 4.7 3.1q2 2 3.2 4.7a14.4 14.4 0 0 1 1.1 5.7v11.8h-27.4v11.1q0 1.8.7 3.4a8.8 8.8 0 0 0 1.9 2.8q1.1 1.2 2.7 1.8 1.6.7 3.4.7h4q1.8 0 3.4-.7a8.8 8.8 0 0 0 2.8-1.8q1.2-1.2 1.8-2.8.7-1.6.7-3.4v-3.3l6 1v2a14.4 14.4 0 0 1-1.1 5.7 14.8 14.8 0 0 1-3.2 4.7q-2 2-4.7 3.1a14.4 14.4 0 0 1-5.7 1.2Zm-45.4 0h-4a14.4 14.4 0 0 1-5.7-1.2 14.8 14.8 0 0 1-4.7-3.1q-2-2-3.1-4.7a14.4 14.4 0 0 1-1.2-5.7V0h6v24.2q2-2.4 5-3.8 2.8-1.4 6.2-1.4h1.5a14.4 14.4 0 0 1 5.7 1.2 14.8 14.8 0 0 1 4.7 3.1q2 2 3.2 4.7a14.4 14.4 0 0 1 1.1 5.7v22.6a14.4 14.4 0 0 1-1.1 5.7 14.8 14.8 0 0 1-3.2 4.7q-2 2-4.7 3.1a14.4 14.4 0 0 1-5.7 1.2Zm80.1-1h-6V0h6v70ZM78.8 56.6V33.4q0-1.8-.7-3.4a8.8 8.8 0 0 0-1.8-2.8q-1.2-1.1-2.8-1.8-1.6-.7-3.4-.7h-4q-1.8 0-3.4.7a8.8 8.8 0 0 0-2.7 1.8q-1.2 1.2-2 2.8-.7 1.6-.7 3.4v23.2q0 1.8.7 3.4a8.8 8.8 0 0 0 1.9 2.8q1.1 1.2 2.7 1.8 1.6.7 3.4.7h4q1.8 0 3.4-.7a8.8 8.8 0 0 0 2.8-1.8q1.1-1.2 1.8-2.8.7-1.6.7-3.4ZM22 15.4l-9.2 32.3h18.8l-9.2-32.3-.2-2.6-.2 2.6Zm102.2 25.4v-7.4q0-1.8-.7-3.4a8.8 8.8 0 0 0-1.8-2.8q-1.2-1.1-2.8-1.8-1.6-.7-3.4-.7h-4q-1.8 0-3.4.7a8.8 8.8 0 0 0-2.7 1.8q-1.2 1.2-1.9 2.8-.7 1.6-.7 3.4v7.4h21.4Z" vector-effect="non-scaling-stroke"></path>
  </symbol>
</svg>
<!-- 添加preserveAspectRatio实现左上对齐，保留max-height设置 -->
<svg style="max-height:50px;" preserveAspectRatio="xMinYMin meet">
  <use xlink:href="#3a63"></use>
</svg>

额外说明 #

• 若不需要保持宽高比，可将meet改为none，但会导致图形拉伸填充容器，不建议用于图标类SVG。
• text-align仅作用于HTML文本或SVG的<text>元素，对路径图形完全无效，别再用它调整对齐了。

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