Figma导出SVG无法适配Tailwind父容器宽高问题排查

核心问题 #

你的SVG存在viewBox与实际图形尺寸不匹配的关键问题：

• 你设置了viewBox="0 0 24 24"，但路径中的坐标（如M14 68、m71.86 47.26）远大于24，导致整个图形被压缩到24x24的视口内，只会显示极小的一部分，自然无法适配父容器的16x16尺寸。

解决步骤 #

1. 修正viewBox属性
   根据路径的最大坐标值，将viewBox调整为能完整容纳所有图形的范围。从你的路径来看，最大x值约72，最大y值是72，因此可以设置viewBox="0 0 72 72"（或留少量边距设为0 0 75 75）。

2. 优化Tailwind样式
   移除object-contain，仅保留w-full h-full即可让SVG填充父容器。如果需要强制拉伸填满（不推荐，会导致图形变形），可以添加preserveAspectRatio="none"属性；默认的preserveAspectRatio="xMidYMid meet"会保持图形比例并居中显示。

修正后的代码示例 #

<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
  <div class="w-16 h-16">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 72 72" class="w-full h-full">
        <path fill="#000" d="M14 68h8a2 2 0 1 0 0-4h-8a2 2 0 1 0 0 4"></path>
        <path fill="#000" d="m71.86 47.26-4-10A2 2 0 0 0 66 36H54v-7.26l4.98 2.98c.86.5 1.96.32 2.58-.48l8-10c.6-.74.58-1.78-.02-2.52l-10-12c-.18-.22-.4-.38-.64-.5l-12-6c-.78-.4-1.7-.24-2.32.36A12.1 12.1 0 0 1 36 4.14c-3.1 0-6.2-1.18-8.58-3.56C27.04.2 26.52 0 26 0c-.3 0-.6.08-.9.22l-12 6c-.24.12-.46.28-.64.5l-10 12c-.6.74-.62 1.78-.02 2.52l8 10c.62.8 1.72.98 2.58.48L18 28.74V36H6a2 2 0 0 0-1.86 1.26l-4 10C-.38 48.58.58 50 2 50h2v24c0 1.1.9 2 2 2h60c1.1 0 2-.9 2-2V50h2c1.42 0 2.38-1.42 1.86-2.74M44 6.02c-.02 4.4-3.6 7.98-8 7.98s-7.98-3.58-8-7.98a16.19 16.19 0 0 0 16 0M12.48 27.38l-5.9-7.36L15.26 9.6 24 5.24V6c0 6.62 5.38 12 12 12s12-5.38 12-12v-.76l8.74 4.36 8.68 10.42-5.9 7.36L54 24.06V22c0-1.1-.9-2-2-2s-2 .9-2 2v14H22V22c0-1.1-.9-2-2-2s-2 .9-2 2v2.06zM64 72H8V50h56zM4.96 46l2.4-6h57.28l2.4 6z"></path>
    </svg>
  </div>
</div>

额外建议 #

从Figma导出SVG时，确保画板尺寸与图形实际尺寸一致，或选择Figma的"导出SVG"选项，让工具自动生成正确的viewBox，避免手动调整出错。

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