Angular中如何通过事件直接访问并修改SVG元素的属性（如fill）

你之前尝试的写法不生效，核心原因是模板引用变量#rrr指向的是原生SVG DOM元素，fill属于SVG专属属性，不能直接通过元素实例的同名属性、不存在的attr对象赋值：

• rrr.fill='red'：SVGRectElement实例没有直接暴露可写的fill顶层属性
• rrr.attr.fill='red'：原生DOM元素不存在attr属性对象
• rrr.attributes.fill='red'：attributes.fill返回的是属性节点实例，不能直接赋值为字符串，需要修改它的value属性

不需要组件变量的模板内直接操作方案 #

写法1：使用DOM标准setAttribute方法（兼容性最好，支持所有SVG属性） #

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.setAttribute('fill', 'red')"/>

写法2：通过样式对象设置（适合样式类SVG属性修改） #

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.style.fill = 'red'"/>

写法3：修正属性节点赋值写法（对应你第三种尝试的可用版本） #

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attributes.fill.value = 'red'"/>

以上三种写法都可以直接在模板内完成交互逻辑，无需额外声明组件变量做绑定。

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