如何在Angular中基于指定条件禁用svg标签？

disabled是HTML表单元素的专属原生属性，SVG不属于表单类元素，本身不支持该属性，所以直接绑定[disabled]="true"既不会生效，也不会自动阻断点击交互。

下面是两种常用的实现方式，可根据场景选择：

• 方案1：直接在SVG上控制交互（轻量无额外标签）
  逻辑上先在点击事件里加禁用条件判断，同时配合CSS样式实现禁用态的视觉效果和交互阻断：
  代码示例：

  <!-- 组件模板 -->
  <span>
    <svg 
      role="presentation" 
      <!-- isDisabled替换为你自己的禁用条件变量 -->
      (click)="!isDisabled && (show = !show)"
      [class.svg-disabled]="isDisabled"
    >
      <use [attr.xlink:href]="show ? '#arrow-top' : '#arrow-bottom'"></use>
    </svg>
  </span>
  

  对应样式：

  .svg-disabled {
    /* 阻断所有鼠标交互，无需额外判断点击事件也可生效 */
    pointer-events: none;
    /* 禁用态视觉标识 */
    opacity: 0.6;
    cursor: not-allowed;
  }
  

• 方案2：用Button标签包裹SVG（语义化更规范）
  利用原生Button支持disabled属性的特性，将SVG放在Button内部，直接控制Button的禁用状态即可，浏览器会自动处理交互阻断，无需额外写事件判断：
  代码示例：

  <span>
    <button 
      type="button" 
      [disabled]="isDisabled"
      <!-- 重置Button默认样式，可根据需求调整 -->
      style="border: none; background: transparent; padding: 0; margin: 0;"
    >
      <svg role="presentation" (click)="show = !show">
        <use [attr.xlink:href]="show ? '#arrow-top' : '#arrow-bottom'"></use>
      </svg>
    </button>
  </span>
  

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