HTML svg标签禁用实现及属性绑定、行内样式设置异常问题咨询

1. 为什么[attr.disabled]对SVG无效 #

disabled是HTML表单元素（如button、input）的专属原生属性，SVG不属于表单元素，本身不支持该属性，因此绑定后不会产生默认禁用效果，需通过样式+事件拦截实现禁用逻辑。

2. 行内样式绑定失效修复 #

你之前的样式绑定写法不符合Angular的规则，推荐两种稳定的绑定方式：

方式一：使用ngStyle统一绑定多个动态样式（推荐） #

// 组件类中声明控制状态
show = true; // false时表示禁用

<svg 
  [ngStyle]="{
    'cursor': show ? 'auto' : 'not-allowed',
    'pointer-events': show ? 'auto' : 'none'
  }"
>
  <use [attr.xlink:href]="show ? '#arrow-top' : '#arrow-bottom'"></use>
</svg>

方式二：单属性分开绑定 #

如果不需要统一管理样式，也可以用单属性绑定，注意含连字符的CSS属性要用kebab-case格式：

<svg 
  [style.cursor]="show ? 'auto' : 'not-allowed'"
  [style.pointer-events]="show ? 'auto' : 'none'"
>
...
</svg>

重要坑点提醒 #

pointer-events: none会让元素完全忽略所有鼠标交互，此时你设置的cursor: not-allowed也不会生效。如果需要同时展示禁用光标，建议保留pointer-events为auto，通过点击事件拦截实现禁用：

<svg 
  [style.cursor]="show ? 'auto' : 'not-allowed'"
  (click)="show ? $event : false"
>
  <use [attr.xlink:href]="show ? '#arrow-top' : '#arrow-bottom'"></use>
</svg>

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