如何垂直拉伸SVG并保持元素锚定底部且不产生底部空白？

要让SVG元素锚定底部且拉伸垂直高度，需要调整元素位置并适配新的画布尺寸，具体步骤如下：

方法1：用transform快速整体下移元素 #

用<g>标签包裹所有SVG元素，通过平移变换将它们直接移到新画布的底部，代码更简洁：

<div class="arrow">
  <svg width="99" height="413" viewBox="0 0 99 413" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 下移300单位（新高度413 - 原高度113），让元素紧贴底部 -->
    <g transform="translate(0, 300)">
      <line x1="0" y1="-2000" x2="0" y2="39.75" stroke="#CECCCC" stroke-width="2"/>
      <line x1="0" y1="69.75" x2="0" y2="84.5" stroke="#CECCCC" stroke-width="2"/>
      <path id="Shape" d="M98.3536 108.854C98.5488 108.658 98.5488 108.342 98.3536 108.146L95.1716 104.964C94.9763 104.769 94.6597 104.769 94.4645 104.964C94.2692 105.16 94.2692 105.476 94.4645 105.672L97.2929 108.5L94.4645 111.328C94.2692 111.524 94.2692 111.84 94.4645 112.036C94.6597 112.231 94.9763 112.231 95.1716 112.036L98.3536 108.854ZM24.5 109H98V108H24.5V109ZM0 84.5C0 98.031 10.969 109 24.5 109V108C11.5213 108 1 97.4787 1 84.5H0Z" fill="#CECCCC"/>
    </g>
  </svg>
</div>

方法2：手动修改元素坐标 #

如果不需要使用transform，可以逐个调整所有元素的y坐标，将每个y值加上413-113=300，同时更新SVG的高度和viewBox：

<div class="arrow">
  <svg width="99" height="413" viewBox="0 0 99 413" fill="none" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="-1700" x2="0" y2="339.75" stroke="#CECCCC" stroke-width="2"/>
    <line x1="0" y1="369.75" x2="0" y2="384.5" stroke="#CECCCC" stroke-width="2"/>
    <path id="Shape" d="M98.3536 408.854C98.5488 408.658 98.5488 408.342 98.3536 408.146L95.1716 404.964C94.9763 404.769 94.6597 404.769 94.4645 404.964C94.2692 405.16 94.2692 405.476 94.4645 405.672L97.2929 408.5L94.4645 411.328C94.2692 411.524 94.2692 411.84 94.4645 412.036C94.6597 412.231 94.9763 412.231 95.1716 412.036L98.3536 408.854ZM24.5 409H98V408H24.5V409ZM0 384.5C0 398.031 10.969 409 24.5 409V408C11.5213 408 1 397.4787 1 384.5H0Z" fill="#CECCCC"/>
  </svg>
</div>

原理说明 #

• 原SVG高度为113，新高度413，两者差值300就是元素需要下移的距离，这样能保证箭头始终贴在新画布的底部。
• 垂直线条的起始y值（如-2000）会超出新viewBox的顶部（y=0），因此线条会自动延伸到SVG顶部，实现垂直拉伸的效果。

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