Ion-icon作为背景填充可用空间的实现问题

针对你遇到的SVG作为背景在屏幕底部被截断的问题，核心原因是ion-content的布局特性和容器高度计算方式，以下是具体解决方案：

1. 调整容器布局，让SVG占满剩余空间 #

ion-content默认是滚动容器，直接给svgContainer设height:100%会忽略上方按钮和列表占用的空间，改用flex布局分配剩余空间：

修改后的HTML： #

<ion-content [fullscreen]="true" class="content-container">
  <ion-button (click)="addSvg()">Add svg</ion-button>
  <ion-list mode="ios" mode="md">
    <ion-radio-group value="mode1" [(ngModel)]="mode">
      <ion-list-header>
        <ion-label>Change Mode</ion-label>
      </ion-list-header>

      <ion-item lines="none">
        <ion-label>Mode 1</ion-label>
        <ion-radio slot="start" value="mode1" mode="md"></ion-radio>
      </ion-item>

      <ion-item lines="none">
        <ion-label>Mode 2</ion-label>
        <ion-radio slot="start" value="mode2" mode="md"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
  <div id="svgContainer">
    <ion-icon id="svgIcon" src="./assets/balloon.svg"></ion-icon>
  </div>
</ion-content>

对应的CSS： #

.content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#svgContainer {
  flex: 1; /* 自动占满ion-content中除顶部元素外的所有剩余空间 */
  overflow: hidden; /* 避免SVG溢出容器 */
  /* 如果需要适配底部安全区，添加下面一行 */
  padding-bottom: env(safe-area-inset-bottom);
}

#svgIcon {
  width: 100%;
  height: 100%;
  /* 根据需求选择缩放方式：cover填充整个容器，contain保持SVG比例完整显示 */
  object-fit: cover;
}

2. 确保SVG自身的viewBox属性正确 #

SVG的缩放行为依赖viewBox属性，如果你的balloon.svg没有设置这个属性，会导致无法正确适配容器。打开SVG文件，确认根元素包含类似这样的属性：

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG内容 -->
</svg>

viewBox的四个值分别是min-x、min-y、宽度、高度，对应SVG内部图形的坐标系范围，设置后SVG就能按比例缩放填充容器。

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