如何在Angular中动态修改Ionic图标SVG内部的属性？

我来分享两种可行的方案，帮你解决Shadow DOM下修改ion-icon内部SVG属性的问题：

方案1：用Angular指令直接操作Shadow DOM #

因为ion-icon的shadow-root是open状态（从你提供的DOM结构能看到#shadow-root (open)），所以我们可以通过元素的shadowRoot属性直接访问内部DOM。下面是具体的实现步骤：

1. 创建自定义指令 #

这个指令会监听填充百分比的变化，自动更新电池内部的rect宽度：

import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: 'ion-icon[batteryFill]'
})
export class BatteryFillDirective implements OnChanges {
  // 输入填充百分比，范围0-100
  @Input() batteryFill: number = 100;
  // 记录原始填充rect的宽度（从你提供的DOM中拿到的292.63）
  private readonly baseFillWidth = 292.63;

  constructor(private el: ElementRef<HTMLElement>) {}

  ngOnChanges(changes: SimpleChanges): void {
    // 当填充百分比变化时更新
    if (changes['batteryFill']) {
      this.updateBatteryVisual();
    }
  }

  private updateBatteryVisual(): void {
    const ionIconEl = this.el.nativeElement;

    // 处理组件还未hydrated、shadowRoot未生成的情况
    if (!ionIconEl.shadowRoot) {
      // 用MutationObserver监听shadowRoot的出现
      const observer = new MutationObserver(() => {
        if (ionIconEl.shadowRoot) {
          this.adjustFillRect(ionIconEl.shadowRoot);
          observer.disconnect();
        }
      });
      observer.observe(ionIconEl, { childList: true, subtree: true });
      return;
    }

    this.adjustFillRect(ionIconEl.shadowRoot);
  }

  private adjustFillRect(shadowRoot: ShadowRoot): void {
    // 找到第二个rect元素（就是你说的填充部分）
    const rects = shadowRoot.querySelectorAll('svg rect');
    if (rects.length < 2) return;

    const fillRect = rects[1];
    // 计算目标宽度，确保不会出现负数
    const targetWidth = Math.max(0, (this.batteryFill / 100) * this.baseFillWidth);
    fillRect.setAttribute('width', targetWidth.toString());
  }
}

2. 在组件中使用指令 #

在你的模板里，给ion-icon加上指令和绑定的填充值：

<!-- batteryPercentage是你组件里的变量，比如从服务或接口获取 -->
<ion-icon name="battery-full-outline" [batteryFill]="batteryPercentage"></ion-icon>

在组件类中定义变量：

// 示例：初始75%填充，可根据业务逻辑动态修改
batteryPercentage: number = 75;

注意点 #

• 这个方案依赖当前ion-icon的DOM结构，如果未来Ionic更新了电池图标的内部SVG结构，你可能需要调整选择器或基础宽度值。
• 记得在你的模块中声明这个指令，并且确保已经导入IonicModule。

方案2：自定义SVG图标（更稳定的长期方案） #

如果担心Ionic版本更新破坏上面的方案，推荐直接使用自定义SVG，这样完全可控，不需要依赖第三方组件的内部结构：

1. 在模板中使用自定义电池SVG #

直接把电池的SVG代码放进模板，然后绑定宽度属性：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
  <title>Custom Battery</title>
  <!-- 电池外框 -->
  <rect x="32" y="144" width="400" height="224" rx="45.7" ry="45.7" 
        stroke-linecap="square" stroke-miterlimit="10" 
        class="ionicon-fill-none ionicon-stroke-width" />
  <!-- 动态填充部分，直接绑定宽度 -->
  <rect x="85.69" y="198.93" 
        [attr.width]="Math.max(0, (batteryPercentage/100)*292.63)" 
        height="114.14" rx="4" ry="4" stroke-linecap="square" 
        stroke-miterlimit="10" class="ionicon-stroke-width" />
  <!-- 电池顶部的小突出 -->
  <path stroke-linecap="round" stroke-miterlimit="10" 
        d="M480 218.67v74.66" class="ionicon-fill-none ionicon-stroke-width" />
</svg>

2. 绑定填充变量 #

同样在组件类中定义batteryPercentage变量，修改它就能实时更新电池填充状态。

这种方案的好处是完全不受外部组件更新的影响，你还可以自由修改SVG的颜色、边框等其他属性，灵活性更高。

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